Chartjs:showLine 取决于值
Chartjs : showLine depending on value
我有一个简单的 Chartjs 折线图。
例如,如果数据集中的值高于 10,我想画线并放入
showLine: false
如果值不符合条件。
我该怎么做?文档中没有信息。
这是一个包含两个数据集的图表示例。第一个包含小于 10 的所有点 >10
和 null
。要跨越间隙,请注意 spanGaps: true
选项。第二个恰恰相反。这里我们通过添加 showLine: false
来隐藏该行。
var ctx = document.getElementById ('myChart').getContext ('2d');
var chart = new Chart (ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 0.5)',
spanGaps: true,
data: [12, null, 15, 20, null, 30, null],
},
{
label: "My second dataset",
backgroundColor: 'rgba(135, 99, 225, 1)',
borderColor: 'rgba(135, 99, 225, 1)',
showLine: false,
data: [null, 9, null, null, 8, null, 7],
}
]
},
options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart"></canvas>
我有一个简单的 Chartjs 折线图。
例如,如果数据集中的值高于 10,我想画线并放入
showLine: false
如果值不符合条件。
我该怎么做?文档中没有信息。
这是一个包含两个数据集的图表示例。第一个包含小于 10 的所有点 >10
和 null
。要跨越间隙,请注意 spanGaps: true
选项。第二个恰恰相反。这里我们通过添加 showLine: false
来隐藏该行。
var ctx = document.getElementById ('myChart').getContext ('2d');
var chart = new Chart (ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 0.5)',
spanGaps: true,
data: [12, null, 15, 20, null, 30, null],
},
{
label: "My second dataset",
backgroundColor: 'rgba(135, 99, 225, 1)',
borderColor: 'rgba(135, 99, 225, 1)',
showLine: false,
data: [null, 9, null, null, 8, null, 7],
}
]
},
options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart"></canvas>