我怎样才能在工具提示中跳过绘制空/零值及其值

Question

我想在zero value的折线图上跳过chartjs的某些点。

我怎么能这样做？

预期结果

的sampleData

    :labels => [
    [ 0] "10/01 (Thu)",
    [ 1] "10/02 (Fri)",
    [ 2] "10/03 (Sat)",
    [ 3] "10/04 (Sun)",
    [ 4] "10/05 (Mon)",
    [ 5] "10/06 (Tue)",
    [ 6] "10/07 (Wed)",
    [ 7] "10/08 (Thu)",
    [ 8] "10/09 (Fri)",
    [ 9] "10/10 (Sat)",
    [10] "10/11 (Sun)",
    [11] "10/12 (Mon)",
    [12] "10/13 (Tue)",
    [13] "10/14 (Wed)",
    [14] "10/15 (Thu)",
    [15] "10/16 (Fri)",
    [16] "10/17 (Sat)",
    [17] "10/18 (Sun)",
    [18] "10/19 (Mon)",
    [19] "10/20 (Tue)",
    [20] "10/21 (Wed)",
    [21] "10/22 (Thu)",
    [22] "10/23 (Fri)",
    [23] "10/24 (Sat)",
    [24] "10/25 (Sun)",
    [25] "10/26 (Mon)",
    [26] "10/27 (Tue)",
    [27] "10/28 (Wed)",
    [28] "10/29 (Thu)",
    [29] "10/30 (Fri)",
    [30] "10/31 (Sat)",
    [31] "11/01 (Sun)"
]

{
           :label => "Sample1(14:35)",
        :data => [
            [ 0] 5098.0,
            [ 1] 5098.0,
            [ 2] 5098.0,
            [ 3] 3898.0,
            [ 4] 4498.0,
            [ 5] 0,
            [ 6] 5898.0,
            [ 7] 5898.0,
            [ 8] 6698.0,
            [ 9] 6698.0,
            [10] 3898.0,
            [11] 4498.0,
            [12] 4498.0,
            [13] 4498.0,
            [14] 5898.0,
            [15] 7698.0,
            [16] 5098.0,
            [17] 4498.0,
            [18] 5898.0,
            [19] 3398.0,
            [20] 3398.0,
            [21] 3898.0,
            [22] 3398.0,
            [23] 3898.0,
            [24] 0,
            [25] 0,
            [26] 0,
            [27] 0,
            [28] 0,
            [29] 0,
            [30] 0,
            [31] 0
        ],

           :label => "Sample1(14:35)",
        :data => [
            [ 0] 5098.0,
            [ 1] 5098.0,
            [ 2] 5098.0,
            [ 3] 3898.0,
            [ 4] 4498.0,
            [ 5] 6698.0,
            [ 6] 5898.0,
            [ 7] 0,
            [ 8] 0,
            [ 9] 0,
            [10] 3898.0,
            [11] 4498.0,
            [12] 4498.0,
            [13] 4498.0,
            [14] 5898.0,
            [15] 7698.0,
            [16] 5098.0,
            [17] 4498.0,
            [18] 5898.0,
            [19] 3398.0,
            [20] 3398.0,
            [21] 3898.0,
            [22] 3398.0,
            [23] 3898.0,
            [24] 0,
            [25] 0,
            [26] 0,
            [27] 0,
            [28] 0,
            [29] 0,
            [30] 0,
            [31] 0
        ],

Answer 1

您可以在数据中添加文本“ N / A”而不是“ 0”值：

data: ["7", "25", "75", "78", "10", "N/A", "77", "02", "44", "N/A"]

这是结果：Image

下面是一个示例：codepen example

Answer 2

您可以使用onAnimationComplete函数禁用点和工具提示显示

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
    animation: false,
    onAnimationComplete: function () {
        // prevents the update from triggering an infinite loop
        if (!this.clearCycle) {
            this.clearCycle = true;

            this.datasets.forEach(function (dataset) {
                dataset.points.forEach(function (point) {
                    if (point.value === 0) {
                        point.display = false;
                        point.hasValue = function () {
                            return false;
                        }
                    }
                })
            })

            this.update();
        }
        else
            delete this.clearCycle;
    }
});

小提琴 - http://jsfiddle.net/u7dsy6ep/

如果您正在使用动画，则需要将逻辑移动到onAnimationProgress并执行一次，除非您不介意在动画进行过程中看到点。

Answer 3

我不确定Chart.js 2的先前版本是否可能，因为工具提示只需将此属性添加到Chart对象：

filter: x => return x.yLabel > 0

一个简单的班轮。 我知道它已经很旧了，但人们可能仍然感到困惑。