chart.js：ラインチャートとバーチャートを開始します

このチュートリアルは、以前のchart.jsの導入に基づいており、ラインチャートの作成を実証しています。チャートの外観とデータ表現を強化するためのカスタマイズオプションを調べます。

ラインチャート：時間の経過とともに変化を視覚化する

ラインチャートは、変数が他の、多くの場合、他の時間との関係でどのように変化するかを効果的に示しています。たとえば、時間の経過とともに車両の速度を表示するのに理想的です。

Chart.jsは、ラインチャートの作成を簡素化します。デフォルトでは、チャートにはrgba(0, 0, 0, 0.1)で満たされています。背景色を表示するには、 backgroundColorプロパティが設定され、 fillプロパティがtrueあることを確認してください。 tensionキーにより、カスタム立方補間が可能になり、データポイント間のラインの曲線に影響があります。 "middle"にstepped設定は、ステップのような効果を生み出します。

データポイント間の個々のセグメントは、ユニークにスタイリングできます。この例は、2台の車の速度を示しています。

 const checkspeed =（ctx、color_a、color_b）=> ctx.p0.parsed.y> ctx.p1.parsed.y？ color_a：color_b;

let dataFirst = {
  ラベル：「車A-スピード（mph）」、
  データ：[0、59、75、20、20、55、40]、
  bordercolor：「黒」、
  BackgroundColor：「透明」、
  BorderDash：[3、3]、
  ステップ：「ミドル」
};

let dataSecond = {
  ラベル：「車B-スピード（MPH）」、
  データ：[20、15、60、60、65、30、70]、
  bordercolor：「青」、
  BackgroundColor：「透明」、
  セグメント：{
        bordercolor：ctx => checkspeed（ctx、 'orangered'、 'yellowgreen'）、
  }、
};

let speeddata = {
  ラベル：["0S"、 "10s"、 "20s"、 "30s"、 "40s"、 "50s"、 "60s"]、
  データセット：[datafirst、datasecond]
};

let linechart = new Chart（speedcanvas、{
  タイプ：「ライン」、
  データ：SpeedData
}）;

このコードは、連続したデータポイントを比較します。速度が低下すると、 orangeredが使用されます。それ以外の場合、 yellowgreen 。

バーチャート：明確にするための複数のY軸

スケールが異なる複数のデータセットの場合、複数のY軸を使用して読みやすさが向上します。各データセットは、 yAxisIDキーを使用して特定のY軸に割り当てることができます。

 let gravitybars = '＃f06292';
let denthesbars = '＃4db6ac';

let desenceData = {
  ラベル：「惑星の密度（kg/m3）」、
  データ：[5427、5243、5514、3933、1326、687、1271、1638]、
  BackgroundColor：dencessbars、
  yaxisid：「y軸密度」
};

GravityData = {
  ラベル：「惑星の重力（m/s2）」、
  データ：[3.7、8.9、9.8、3.7、23.1、9.0、8.7、11.0]、
  BackgroundColor：GravityBars、
  yaxisid：「y軸の重力」
};

let planetdata = {
  ラベル：["Mercury"、 "Venus"、 "Earth"、 "Mars"、 "Jupiter"、 "Saturn"、 "uranus"、 "Neptune"]、
  データセット：[DensityData、GravityData]
};

let chartoptions = {
  バーパーセンター：1
  categorypercentage：0.8、
  スケール：{
    「Y軸密度」：{
      グリッド：{
        色：dencessbars、
        ティックコラー：densitybars、
        bordercolor：dencessbars
      }、
      ティック：{
        色：dencessbars
      }、
      ポジション：「左」
    }、
    「Y軸の重力」：{
      グリッド：{
        色：GravityBars、
        ティックコラー：グラビティバー、
        BorderColor：GravityBars
      }、
      ティック：{
        色：GravityBars
      }、
      ポジション：「正しい」
    }
  }
};

let barChart = new Chart（dencesscanvas、{
  タイプ：「バー」、
  データ：PlanetData、
  オプション：Chartoptions
}）;

この例では、一意のyAxisID値を使用し、各軸のグリッド、ダニ、および境界線の色をchartOptionsします。 barPercentageとcategoryPercentageコントロールバー間隔。

結論

このチュートリアルでは、chart.jsの基本ラインとバーチャートの作成とカスタマイズをカバーしているため、視覚的に魅力的で有益なチャートを作成できます。次のチュートリアルでは、レーダーと極地の領域チャートを調べます。

以上がchart.js：ラインチャートとバーチャートを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。