ChartJS 图表,没有交叉线,只有水平线在同一水平线上,直到下一点

o2rvlv0m  于 2023-03-02  发布在  Chart.js
关注(0)|答案(1)|浏览(165)

因此,在下面的示例中,顶部的图表是默认显示的图表,图表上的点由点到点的线连接。
我正在寻找一种方法,有它像下面的例子,使水平线从一个点到下一个点

wi3ka0sx

wi3ka0sx1#

取决于您的数据集 checkout this example
基本上,您只需在折线图的dataset对象上设置属性stepped

下面是一个简短的演示,展示了此单一属性的效果:

let data = [10, 20, 70, 30, 90]
new Chart(document.getElementById("chart"), {
    type: 'line',
    data: {
      labels: data,
      datasets: [{
        label: 'Dataset',
        data: data,
        fill: false,
      },{
        label: 'Dataset(stepped) - offset by -100',
        data: data.map(v => v-100),
        fill: false,
        stepped: true,
      }]
    },
    options:{
      maintainAspectRatio: false,
    }
});
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>    
<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

相关问题