gpt4 book ai didi

javascript - 如何使数据在 Chart.js 条形图上始终可见

转载 作者:行者123 更新时间:2023-12-03 09:23:48 26 4
gpt4 key购买 nike

嘿,我已经实现了以下代码,一切正常,但如果我放置选项变量,则会显示图表,但在条形出现后数据不可见。我希望一旦显示条形图,数据就应该自动显示,并且之后应该可见(而不是悬停时)。以下代码不允许悬停数据,但不会使其完全可见。

HTML:

<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="../Chart.js"></script>
</head>
<body>
<div style="width: 40%">
<canvas id="canvas" height="450" width="1000"></canvas>
</div>
</body>
</html>

JS:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
labels : ["May","June","July","Aug","Sept","Oct"],
datasets : [
{
fillColor : "rgba(66,139,202,0.8)",
strokeColor : "rgba(0,0,0,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(0,0,0,1)",
data : [65, 59, 80, 81, 56, 55]
}
]

}
var options =
{
tooltipTemplate: "<%= data %>",

onAnimationComplete: function()
{
this.showTooltip(this.segments, true);
},

tooltipEvents: [],

showTooltips: true ,
responsive : true
}

var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Bar(barChartData, options);

请帮我一个忙,先谢谢了。

最佳答案

您需要进行一些小的更改(用 value 代替 data,用条形图代替段)

...
tooltipTemplate: "<%= value %>",
onAnimationComplete: function () {
this.showTooltip(this.datasets[0].bars);
},
...

假设您只有一个系列。

<小时/>

fiddle - http://jsfiddle.net/s4pudkz8/

<小时/>

enter image description here

关于javascript - 如何使数据在 Chart.js 条形图上始终可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31753588/

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