ChartJS中的虚线

Question

ChartJS中的虚线

Js-*_*beg 12 javascript jquery chart.js

我使用Chart.js中的图表来创建我的图表,我想要做的是在同一个图表上有2条水平线,但其中一条应该是点缀的.我试图在Google上找到解决方案但没有成功.

你知道怎么做吗？

提前致谢,

Answer 1

Omi*_*Omi 29

您可以将该border-dash属性用于特定数据集.您可以指定边框长度和间距.例如 borderDash: [10,5]

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Label1", "Label2", "Label3"],
        datasets: [{
            label: 'legend1',
            data: [12, 19, 3],
            borderDash: [10,5]
        },{
            label: 'legend2',
            data: [22, 9, 13],
          
        }]
      
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" ></script>

<html>
  <body>
    <div class="myChartDiv" style="height:500px">
      <canvas id="myChart" width="600" height="300"></canvas>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，4 月前
查看次数：	13922 次
最近记录：	8 年，4 月前