Question

在制作带条和线的组合图表时，我注意到第一个数据集是在第二个数据集上绘制的。您可以使用以下代码在Chart.js 2.6及更高版本上重现它：

<div class="col-12 col-md-6">
    <canvas id="eChart2"></canvas>
</div>

<script>

    var chartContainer1 = $('#eChart2');
    new Chart(chartContainer1, {
        "type": "bar",
        "data": {
            "labels": ["January", "February", "March", "April"],
            "datasets": [
                { "label": "Bar Dataset", "data": [10, 20, 30, 40], "borderColor": "rgb(255, 99, 132)", "backgroundColor": "rgb(255, 99, 132)" },
                { "label": "Line Dataset", "data": [50, 15, 25, 50], "type": "line", "fill": false, "borderColor": "rgb(54, 162, 235)" }
            ]
        },
        "options": { "scales": { "yAxes": [{ "ticks": { "beginAtZero": true } }] } }
    });



</script>

当条形填充不透明时，我们无法看到该条形图是在条形图下绘制的。

如何在条形图上绘制线条？所以，我想要在第一个数据集上绘制第二个数据集。

由于某些原因，无法接受透明条和更改数据集顺序作为答案。该行变得可见，但我想使用非透明条形填充和两个以上的数据集，因此这些变通办法不能满足我的需求。

Chart.js组合条形图和折线图重叠 - 数据集绘制顺序

0 个答案: