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

标签 javascript chart.js

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

这是我想要的功能,它与 y 轴类型“线性”配合得很好,但是一旦我将类型更改为“对数”,所有空值仍然显示在 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

最佳答案

我制作了一个简单的折线图来测试空值。但在我的测试中,这些值没有显示在图表中。所以我不确定你正在使用什么设置。你能展示一些代码吗?

这是我的测试用例:

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',
      }]
    }
  }
});

关于javascript - Chart js 对数折线图显示 NaN 值而不是 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60205923/

相关文章:

javascript - Chart.js 中的 donut chart 调整问题

php - 如何创建 YouTube 视频直播?

javascript - AngularJS:无法从 ctrl 范围获取变量值到指令中

javascript - sapui5 sap.ui.table 如何以编程方式取消选中表行的复选框

chart.js - angular-chart.js 基于图表标签值的自定义颜色

Laravel 使用 Graph 生成 PDF 并通过电子邮件发送

javascript - Reactjs 中的路由问题,其中 matchUrl 来自父组件

javascript - 考虑到未知 Javascript 引擎的代码,哪些考虑因素对执行速度和内存节省影响最大?

javascript - 为什么 Chart.js v2 基于时间的数据未与 X 轴正确对齐?

javascript - 我的 for 循环不会在 Javascript 中迭代