angular - Angular Chart.js 不显示趋势线
问题描述
我将 Angular 与 Chart.js 一起使用,我需要添加趋势线。我添加了chartjs-plugin-trendline.js
如下插件和代码,但它没有显示趋势线。
HTML 代码:
<canvas id="base" class="chart-bar" chart-labels="vm.ts_labels" class="chart chart-line" chart-data="vm.generalSatisfactionLine" chart-dataset-override="vm.overallGraphDataOveride" chart-options="vm.overallGraphOptions">
角代码:
vm.overallGraphOptions = {
elements:
{
point:
{
radius: 9,
hoverRadius: 7.5
}
},
trendlineLinear: {
style: "rgba(255,105,180, .8)",
width: 2
}
layout: {
padding: {
left: 5000,
right: 0,
top: 0,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
type: "linear",
position: "left",
id: 'satisfaction',
gridLines: {
display: true
},
ticks: {
display: true,
min: 0,
max: 10,
callback: function (label, index, labels) {
return label * 10;
},
},
labels: {
show: true,
}
},
{
type: "linear",
position: "right",
id: 'responses',
gridLines: {
display: false
},
ticks: {
display: false
},
labels: {
show: true,
}
}],
}
}
解决方案
您似乎正在指定折线图:
<canvas id="base" class="chart-bar" chart-labels="vm.ts_labels" class="chart chart-line" ...
-----------------------------------------------------------------------------^
chartjs-plugin-trendline的自述文件指出仅支持条形图。