Question

嘿，我已经实现了以下代码，一切正常，但是如果我把我的选项变量显示图表，但是在显示条形图后数据不可见。我希望一旦条形显示，那么数据应该自动出现，之后应该是可见的（不是悬停）。以下代码不允许悬停数据，但它不能完全显示。

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);

请帮我一些忙，先谢谢。

Answer 1

您需要进行一些小的更改（value而不是data和条形而不是段

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

假设您只有一个系列。

小提琴 - http://jsfiddle.net/s4pudkz8/

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

1 个答案: