web-dev-qa-db-ja.com

既存のチャートにトレンドラインを追加するChart.js

chart.jsで作成された既存のチャートにトレンドラインを追加するソリューションを何時間も探していました

Chart.jsには対数近似曲線しか追加できないと思いますか？

トレンドラインを最初から描きたくはありませんが、これら2つのラインの既存のデータに基づいて2つのトレンドラインを追加します。このフィドルの例を参照してください：

THANK YOUhttps://jsfiddle.net/blueagency/p88mx3nw/

よろしくお願いします。

javascriptchartschart.jslinecharttrendline
5
Blue Agency

現在、chart.jsにはトレンドライン機能がまったくありません（対数でさえありません）。 Common Scale Configuration セクションの最後にあるカスタムティックフォーマットの例と混同されていたのではないでしょうか。

ただし、 chartjs-plugin-annotation プラグインを使用してグラフにトレンドラインを描画することはできますが、ラインの正しい位置を計算するために独自のロジックを実装する必要があることに注意してください（その後アノテーションプラグインを使用して実際に描画するだけです）。

プラグインの使用方法を示す例を次に示します（プラグインは、チャートに追加できるannotationプロパティのセットを提供しますoptions。次に、を計算する関数を作成する必要があります。トレンドラインを作成し、その結果を使用して注釈valueおよびendValueプロパティを設定します。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Drsw Line on Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 2225,
        endValue: 0,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: true,
          content: 'Trendline',
          yAdjust: -16,
        }
      }]
    }
  }
});

これで実際の動作を確認できます codepen 。

5
jordanwillis

chartjs-plugin-trendlineは、Chart.jsにプラグインする直線トレンドラインを提供します。

NPM： https://www.npmjs.com/package/chartjs-plugin-trendline/v/0.1.1

ダウンロード： https://www.jsdelivr.com/package/npm/chartjs-plugin-trendline

使用法は非常に簡単です-データセットに以下を追加するだけです：

datasets: [{
            // Other configurations
            // ...
            trendlineLinear: {
                style: "rgb(43 ,66 ,255, 0.3)",
                lineStyle: "dotted|solid",
                width: 2
            }
        }]
2
Savage