向现有图表Chart.js添加趋势线

Question

从几个小时开始，我一直在寻找一种向使用Chart.js构建的现有图表添加趋势线的解决方案

我认为我们只能在Chart.js上添加对数趋势线吗？

我不想从头开始绘制趋势线，而是根据这两条线的现有数据添加2条趋势线；请看这个小提琴的例子：

THANK YOU https://jsfiddle.net/blueagency/p88mx3nw/

预先非常感谢您的所有帮助。

Answer 1

在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
            }
        }]

Answer 2

当前，chart.js根本没有趋势线功能（甚至没有对数功能）。也许您在“ 通用标度配置”部分末尾对自定义刻度格式示例感到困惑？

但是，您可以使用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上看到它的运行情况。