ComponentOne Studio TrueChart for ASP.NET (C1WebChart2D) ヘルプ
手順 4:グラフのカスタマイズ
C1Chart のクイックスタート > 手順 4:グラフのカスタマイズ

このセクションでは、組み込みの書式設定効果を使用して、グラフの外観をより魅力的で実用的なものにする方法を学びます。

このチュートリアルを完了したら、データバインドされたグラフの外観は次のようになります。

C1Chart では、グラフの背景色をコントロールの色として設定し、プロット領域を白色に設定しますが、別の色を選択したり、まったく色を使用しなかったり、独自に2つの色を使用してグラデーション効果を生み出したりできます。

データ系列の色の変更

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[データ]を選択します。
  3. [グラフデータ]タブで、[データセット]グループボックスから各データセットを選択して、[塗りつぶし]ドロップダウンチェックボックスをクリックし、特定の塗りつぶし色を選択します。

    塗りつぶし種別として [シンプル]を選択して、「単価」の色を PaleTurquoise に、「在庫ユニット数」の色を BlueViolet に、「再注文レベル」の色を DeepPink に設定します。

  4. OK〉をクリックします。

    このように明るい色と暗い色の間でコントラストを付けることで、データセットの区別が容易になります。

凡例の位置の変更

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[外観]-[凡例]を選択します。
  3. 表示]チェックボックスをクリックして、〈適用〉をクリックします。
  4. 凡例が右側に表示されます。
  5. 位置]ドロップダウンチェックボックスをクリックして、[South ]を選択します。
  6. OK〉をクリックします。

    こうすれば水平方向のスペースが広がるため、グラフが見やすくなります。

軸タイトルの削除

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[軸X]を選択し、[タイトル]のテキストを削除します。
  3. 同様に[軸Y]を選択し、[タイトル]のテキストを削除します。
  4. OK〉をクリックします。

水平グリッド線の削除

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[軸X]-[グリッド線]を選択します。
  3. 主グリッドグループで、[表示]チェックボックスの選択を解除します。
  4. OK〉をクリックします。

    X 軸のグリッド線がグラフから削除されます。

グラフヘッダのフォントスタイルの変更

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[外観]-[ヘッダ]を選択します。
  3. 表示]チェックボックスをクリックします。
  4. テキスト]に任意の文字列を入力し、〈適用〉をクリックします。
  5. ヘッダが表示されます。
  6. フォント〉ボタンをクリックして[フォント]ダイアログボックスを開きます。フォント名をMS明朝に、スタイルを太字に、サイズを 10 に変更し、〈OK〉をクリックします。
  7. グラフのプロパティ]ダイアログボックスで〈OK〉をクリックします。

グラフの枠線の色の変更

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[外観]-[グラフ領域]を選択します。
  3. 外観[グラフ領域]」タブで、[境界線]ドロップダウンチェックボックスをクリックして、スタイルをSolid、色を Black、太さを2に設定します。
  4. OK〉をクリックします。

グラフへのグラデーション塗りつぶし効果の追加

  1. C1Chart コントロールを右クリックして、[グラフのプロパティ]を選択します。
  2. グラフのプロパティ]ダイアログボックスで、[外観]-[グラフ領域]を選択します。
  3. 外観[グラフ領域]」タブで、[塗りつぶし]ドロップダウンチェックボックスをクリックして、[グラデーション]オプションを選択します。グループボックスにいくつかのグラデーションオプションが表示されます。「色1」 に LightYellow、「色2」 に White を選択し、1つめのグラデーションを選択して、〈OK〉をクリックします。

    アプリケーションを実行して、グラフの外観を確認してください。

クイックスタートは完了しました。このクイックスタートでは、以下の方法を学びました。