Question

我试图绘制折线图，该折线图应显示部分实线和部分虚线（表示实际和预期数据）。我发现这个示例在版本2.0.0-alpha上完美运行

＆＃13;

var lineChartData = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, 3, 4],
        borderColor: '#66f',
        borderDash: [20, 30],
        pointBackgroundColor: "transparent"
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
        pointBackgroundColor: "transparent"
    }]
};

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
        elements: {
            line: {
                fill: false
            }
        }
    }
});

＆＃13;

<script src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script>
<canvas id="chart"/>

＆＃13;

但是当我使用当前的2.1.3版本运行相同的代码时，线条不能正确重叠（在D点和E点之间）：

＆＃13;

var lineChartData = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, 3, 4],
        borderColor: '#66f',
        borderDash: [20, 30],
        pointBackgroundColor: "transparent"
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
        pointBackgroundColor: "transparent"
    }]
};

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
        elements: {
            line: {
                fill: false
            }
        }
    }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="chart"/>

＆＃13;

不幸的是，由于当前版本中已解决的其他错误，我无法使用alpha版本。有没有在发布版本的第一个代码段中复制图形的方法？

Answer 1

一种解决方案可能是：当数据集（1）的值不可见时，将其设置为null。这条线不会产生贝塞尔曲线，这是不方便的。

示例：

var lineChartData = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
    label: "My First dataset",
    data: [, , , , 2, 3, 4],
    borderColor: '#66f',
    borderDash: [20, 30],
    pointBackgroundColor: "transparent"
},{
    label: "My First dataset",
    data: [1, 8, 3, 4, 2, , ],
    borderColor: '#66f',
    pointBackgroundColor: "transparent"
}]

};

https://jsfiddle.net/scs_3/8qqv69ot/

Chart.js：带有局部虚线的折线图

1 个答案: