我正在使用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的源代码,我发现它在渲染图表之前尝试对其数据源中的每个值字段求和(参见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/