Chart js对数折线图,显示NaN值而不是null

问题描述 投票:0回答:1

据我了解,Chart js折线图中未显示空值,并且该行在这些点处中断。

这是我想要的功能,它与y轴类型'linear'很好地兼容,但是一旦我将类型更改为'logarithmic',所有空值仍将显示在0的位置上图表和工具提示将鼠标悬停在这些点上时显示NaN。

下面是同一张图表的两张图片,一张带有线性,另一张带有对数类型:

enter image description here^线性enter image description here^对数

是否可以隐藏第一张图片所示的NaN数据点?

我拥有的代码是一个非常基本的图表,所以我看不出这怎么可能是我的代码中的错误,因为打破它的唯一区别就是类型的改变。我搜索了遇到此问题的其他人或Chart js文档中的一些条目,但没有运气。

[如果有人已经为此类问题创建了解决方案,或者可以为这种奇怪的效果想到解决方法,我将非常感谢您的任何答复!

编辑这是我的html和javascript文件示例,用于基于用户@DJ回答的基本示例来创建新图表:

HTML:

<div class="content-container">
    <canvas id="newChart" class="chart"></canvas>
</div>

javascript:

angular.module('myApp').controller('MobileAnalysisController', function () {

    init();
    return;

    function init() {
        drawNewChart();
    }

    function drawNewChart() {
        var myNewChart = {
            type: "line",
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                datasets: [
                    {
                        data: [null, null, 106, 106, 107, 111, 133, 221, 783, 2478],
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        type: 'logarithmic',
                    }]
                }
            }
        };
        var newCtx = document.getElementById("newChart").getContext("2d");
        var newChart = new Chart(newCtx, myNewChart);
        newChart.update();
    }
});

但是即使这样仍然给我一个结果,其中null / NaN值应该是不可见的,但不是:

enter image description here

javascript chart.js
1个回答
0
投票

我制作了一个简单的折线图来测试空值。但是在我的测试中,这些值未显示在图中。因此,我不确定您使用的是什么设置。您可以显示一些代码吗?

这是我的测试用例:

import "./styles.css";
import Chart from "chart.js";

new Chart(document.getElementById("line-chart"), {
  type: "line",
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    datasets: [
      {
        data: [NaN, NaN, 106, 106, 107, 111, 133, 221, 783, 2478],
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
          type: 'logarithmic',
      }]
    }
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.