【发布时间】:2017-07-23 04:01:05
【问题描述】:
图表一直运行良好,但突然就不行了。 Here's a demonstration of the problem.
如您所见,工具提示是透明且闪烁的,它们不会移动到我悬停的下一个点。此外,当我单击它们的标签时,图例不会打开/关闭线条。
这是我的选择:
export const LineChartLevel3Options = {
lineChartLabels: ["Tid1", "Tid2", "Tid3", "Tid4"],
lineChartOptions: {
responsive: false,
title: {
display: true,
text: 'Graf over vitale værdier',
fontColor: 'black',
fontSize: 20,
},
legend: {
labels: {
fontColor: '#CCC'
}
},
scales: {
yAxes: [{
ticks: {
fontColor: '#CCC'
},
gridLines: {
color: 'rgba(0, 0, 0, 1)'
}
}],
xAxes: [{
ticks: {
fontColor: '#CCC'
},
gridLines: {
color: 'rgba(0, 0, 0, 1)'
}
}],
}
},
lineChartColors: [
{ // grey
backgroundColor: 'rgba(255,0,0,0.3)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
],
lineChartLegend: true,
lineChartType: 'line',
};
还有 HTML:
<canvas baseChart width="650" height="250" [datasets]="getJoinedChartData(patientService.patientLevel3)" [labels]="lineChart3.lineChartLabels" [options]="lineChart3.lineChartOptions"
[colors]="lineChart3.lineChartColors" [legend]="lineChart3.lineChartLegend" [chartType]="lineChart3.lineChartType">
</canvas>
编辑:这似乎与我的数据集和标签有关。我从 valor-software 的网站复制了折线图,它一直有效,直到我使用我自己的标签和数据集。还是没搞清楚他们有什么问题。
【问题讨论】:
-
在您的选项中,尝试添加一个工具提示对象:
lineChartOptions: { responsive: true, tooltips: { mode: 'index', intersect: false } }。你可以看到所有的工具提示选项here
标签: chart.js ng2-charts