工具提示未显示在我的图表中。你能明白为什么吗？
<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js'></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
// labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'],
labels: [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets: [
{
data : [{% for item in values %}
{{item}},
{% endfor %}],
backgroundColor:
[
"#2ecc71","#3498db","#95a5a6","#6dc066","#daa520",
"#9b59b6","#f1c40f","#e74c3c","#34495e","#008080",
"#ffc0cb","#d3ffce","#ff7373","#ffa500","#e6e6fa",
"#003366","#20b2aa","#c6e2ff","#008000"
]
}
]
},
options: {
responsive : true,
showTooltips: true,
scales: {
yAxes: [
{
stacked: false
}
],
xAxes: [
{
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}
]
}
}
});
</script>
这是图表的照片(顶部被切掉了一点)。其他一切都工作正常。标签和数据来 self 正在运行的 python 脚本，它们正在产生预期的结果。这只是我似乎无法工作的工具提示。
感谢您的帮助!
最佳答案
出现此问题的原因是 backgroundColor 数组。您不能在折线图的单个数据集中使用多种颜色数组。请使用单独的颜色。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'],
datasets: [{
data: [12, 23, 43, 34, 53, 47, 36],
backgroundColor: '#3498db'
}]
},
options: {
responsive: true,
showTooltips: true,
scales: {
yAxes: [{
stacked: false
}],
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>关于javascript - 工具提示在 Chart.js 中不起作用。有任何想法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43596365/