gpt4 book ai didi

javascript - 工具提示在 Chart.js 中不起作用。有任何想法吗?

转载 作者:行者123 更新时间:2023-11-28 18:00:37 25 4
gpt4 key购买 nike

工具提示未显示在我的图表中。你能明白为什么吗?

<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 脚本,它们正在产生预期的结果。这只是我似乎无法工作的工具提示。

感谢您的帮助!

enter image description here

最佳答案

出现此问题的原因是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com