Question

我有这段代码：

 animation: {
     duration: 500,

     onComplete: function() {                                                                       
         var ctx = this.chart.ctx;

         var chart = this;

         ctx.textAlign = "center";

         ctx.textBaseline = "middle";

         var datasets = this.config.data.datasets;

         ctx.font = "15px QuickSand";

         datasets.forEach(function (dataset, i) {
             switch ( chart.getDatasetMeta(i).type ) {
                 case "bar":
                     ctx.fillStyle = "#303030";

                     chart.getDatasetMeta(i).data.forEach(function (p, j) 
                     {
                         ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 10);
                     });
                 break;
             }
         });
     }                                                               
 }

这些数据集：

datasets: [
    {
        backgroundColor: '#f87979',
        data: [6500, 5500]},
    {
        backgroundColor: '#f8f8ee', 
        data: [4800, 5600]
    }
]

数据集设置为使用。

堆叠

scales: {
    xAxes: [{
        barThickness: 25,
            stacked: true,
            ticks: {
               beginAtZero: true,
               padding: 0,
               fontSize: 13
            }
    }],
    yAxes: [{
        stacked: true,
        display: false
    }]
},

以上代码的作用是将值放在条形图上。我的问题是我希望在每个条形图上方显示每个数据集的最高值。而不是每个点的所有值。

你们能帮助我吗？我一直想尝试这样做一天。

要清除而不是：

Image with all values

我想要这个： Image with wanted values

Answer 1

看看这个jsfiddle：https://jsfiddle.net/umsbywLg/2/

基本上我计算了最大值，然后将其绘制在叠加条上的顶部：

<script>
function myFunction() { 
    var regexp = /(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?/;
    var content=$.trim($("textarea").val()).split('\n');
    var result="";
    for(var i = 0;i < content.length;i++){
        if(regexp.test(content[i])){
            result=result+content[i]+'\n';          
        }
    }
    $("textarea").val(result);
}

</script>

堆叠数据集时显示条形图的最高值（chartjs）

1 个答案: