gpt4 book ai didi

javascript - ChartJS 中的虚线

转载 作者:可可西里 更新时间:2023-11-01 02:16:44 26 4
gpt4 key购买 nike

我正在使用 Chart.js 中的图表创建我的图表,我想做的是在同一张图表上有 2 条水平线,但其中一条应该是虚线。我试图在谷歌上找到解决方案但没有成功。

你知道怎么做吗?

提前致谢

最佳答案

您可以为特定数据集使用 border-dash 属性。您可以指定 border length & spacing .例如 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
}
}]
}
}
});
<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>

关于javascript - ChartJS 中的虚线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44813714/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com