添加趋势线与现有图表chart.js之

从小时里，我一直在寻找一个解决方案，趋势线添加到具有chart.js之添加趋势线与现有图表chart.js之

建我想我们只能在chart.js之添加数趋势线现有图表？

我不想从头开始画一条趋势线，而是根据这两条线的现有数据添加两条趋势线;请参阅此琴例如：

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

非常感谢你提前为您的帮助。

来源

2017-04-04 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看到它的行动。

来源

2017-04-04 19:19:36 jordanwillis

是的，你说得对，我想我可以用一个数趋势线的chart.js之正式文件，这太快了从我身边走开。感谢您的帮助，并建议关于这个chartjs-annotation插件。但是，只能指定2个值，因此趋势线只能是“二元”：向上或向下，表示正向或负向趋势。例如，对于数据而言，情况会稍微复杂一些，例如，显示的结果会增加，然后会下降一些，然后再次上升。 –

我明白。您也可以创建另一个代表趋势线的数据集。就像在我的例子中，你将不得不自己计算趋势线，然后沿着这条线选择几个点，然后像图中任何其他线一样在图上绘制。 – jordanwillis

这是我以前试过的。但是，视觉渲染根本不令人愉快，干脆。我认为趋势线是绝对必要的功能，应该成为图表库的一部分。 –

添加趋势线与现有图表chart.js之

回答

相关问题