Wijmo UI for the Web
グリッド線の表示
Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > BubbleChart > 操作手順 > グリッド線の表示

クイックスタートの例に機能を追加して、gridMajor オブジェクトと gridMinor オブジェクトを追加できます。これらのオブジェクトには、axisのグリッド線のスタイルが含まれます。

  1. HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは次の操作を実行します。
    • X 軸に次のオプションを設定します。
      • X 軸のテキストタイトルは "Sales"。
      • X 軸のラベルは CO 書式設定（小数点以下なしの通貨）を使用します。
      • チャート内の主グリッド線（gridMajor）は、style の stroke-dasharray 属性を "" に設定して、破線ではなく実線にしています。
      • チャート内の副グリッド線（gridMinor）は、デフォルトの破線にします。
        メモ：グリッド線の visible 属性は表示するかどうかを決定します。
    • X 軸のラベルが密集しないように、凡例を非表示にします。
    • 次のプロパティを持つ系列を作成します。
      • ツールチップで使用されるラベルは "Company X Market Share"。
      • Y 軸には各会社の製品数を表示します。
      • X 軸には各会社の売上を表示します。
      • Y1 値は、市場シェアに基づいて各企業のバブルのサイズを設定します。

    ドロップダウンからコードを貼り付けます

  2. HTML ファイルの <body> セクションを変更する必要はありません。チャートを表示するには、基本的な <div> タグで十分です。
  3. HTML ファイルを保存し、ブラウザで開きます。チャートは次の図のようになり、主グリッド線は実線、副グリッド線は破線になります。

関連トピック

クイックスタート
操作手順

参照

wijmo.chart.wijbubblechart 名前空間
axis フィールド
chartLabelFormatString フィールド
chartLabelStyle フィールド
legend フィールド
seriesList フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.