javascript - Chart.js零处理

我正在使用chart.js并呈现一个甜甜圈图。我想将初始图表总计值设置为零，以便它可以呈现完整的“空”图表。当我用零使图表无效时，它不会呈现。我在开发人员文档中找不到它如何处理零。

var kPoints = 000;
var mPoints = 000;
var tPoints = 000;
var cPoints = 000;
var doughnutData = [ {
    value : kPoints,
    color : "#FF8000"
}, {
    value : mPoints,
    color : "#99CC00"
}, {
    value : tPoints,
    color : "#0099CC"
}, {
    value : cPoints,
    color : "#333333"
}, ];
var ctx = $("#profileChart").get(0).getContext("2d");
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

最佳答案

通过阅读Chart.js的源代码，我发现它在呈现图表之前尝试对数据源中的每个value字段求和(请参见segmentTotal here的使用)。

要解决此问题，请对所有值使用null并将一个(或多个)数据点设置为非常小的，接近零的值。我在这里使用浮点符号表示其中一个值:

var kPoints = null;
var mPoints = null;
var tPoints = null;
var cPoints = 1e-10;

之后，下面的示例使用不同的数据值重新渲染图表(经过3秒的延迟)，以显示值从默认“暗”图表更新为填充版本的情况:

setTimeout(function () {

    // Generate a new, random value for each of the data points
    doughnutData.forEach(function (item) {
        item.value = Math.floor((Math.random() * 10) + 1);
    });

    var ctx = $("#profileChart").get(0).getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
}, 3000);

JSFiddle示例:http://jsfiddle.net/MasterXen/6S9DB/3/

关于javascript - Chart.js零处理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23940436/