Chartjs：showLine 取决于值答案

【问题标题】：Chartjs : showLine depending on valueChartjs：showLine 取决于值
【发布时间】：2018-05-24 12:58:54
【问题描述】：

我有一个简单的 Chartjs 折线图。

例如，如果数据集中的值高于 10，我想画线并放置

showLine: false

如果值不符合条件。

我该怎么做？文档中没有信息。

Link to doc

Jsfiddle

【问题讨论】：

您可以在数据集中将values < 10 设置为null。
是的，但如果我这样做，它不会显示要点
您能说得更具体些吗？对于 = 10 的值都应该用一条线连接？我说对了吗？
是的，这是正确的
我认为您可以在图表中使用两个数据集。一个值高于 10，其他所有为空。第二个反过来。第一个显示线，另一个只有点

标签： javascript chart.js linechart chartjs-2.6.0

【解决方案1】：

这是一个包含两个数据集的图表示例。第一个包含小于 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>

【讨论】：