我的图形显示正常,但是当我将鼠标悬停在数据点上时,会出现多个框,而不仅仅是一个。我试图将模式设置为索引,并将相交设置为true,以便仅显示1个工具提示,但这并没有执行任何操作。当我将鼠标悬停在特定数据点上时,我只希望显示一个框。任何提示>
这是我在脚本标记内的html文件中的代码
var options = {
tooltips: {
mode: 'dataset',
intersect: true
}
}
var barData = {
labels : [
{% for item in labels %}
"{{ item | round(1) }}",
{% endfor %}
],
datasets : [{
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
bezierCurve : false,
data : [
{% for item in values1 %}
{{ item | round(1) }},
{% endfor %}]
}
]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipsenabled = true;
Chart.defaults.global.tooltipsYPadding = 1;
Chart.defaults.global.hoverMode = "index";
Chart.defaults.global.hoverintersect = true;
Chart.defaults.global.tooltipsCornerRadius = 1;
Chart.defaults.global.tooltipstitleFontStyle = 'bold';
Chart.defaults.global.tooltipsFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;
// get bar chart canvas
var mychart = document.getElementById("chart1").getContext("2d");
steps = 10
max = {{ max1 }}
// draw bar chart
var LineChartDemo = new Chart(mychart).Line(barData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0,
scaleShowVerticalLines: true,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true,
bezierCurve: false,
});
</script>