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

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

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

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

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

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

1> jordanwillis..：

---

当前，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上看到它的运行情况。

---

那是我以前尝试做的。但是视觉渲染一点都不愉快，生涩。我认为趋势线绝对是必不可少的功能，应该成为图表库的一部分。

---

它是开源的。添加功能并提交拉取请求