javascript - 当数据为零时，Flot 饼图呈现图例但不呈现空图表

Question

我正在当前的项目中制作一些流程图。当您至少有一个具有正值的数据对象时，该代码效果很好，但如果返回的数据为零，我想至少显示一个空圆圈或某种消息或其他内容。这是我试图制作图表的数据对象。图例显示正常，但没有图表(甚至是空图表)。

datacontent":[{"label":"Wired headset","data":0},{"label":"Bluetooth headset","data":0},{"label":"Car bluetooth","data":0},{"label":"None","data":0}]

我真的很想收到一条诸如“抱歉，没有可用图表”之类的消息，同时仍然显示图例。这可能吗？

这是当前显示内容的屏幕截图:

Answer 1

我会在绘图调用后添加“无数据”检查，并将消息直接添加到 Canvas 。这样您就可以保留图例并可以添加进一步的自定义。

somePlot = $.plot($("#placeholder"), [{"label":"Wired headset","data":0},{"label":"Bluetooth headset","data":0},{"label":"Car bluetooth","data":0},{"label":"None","data":0}], {
    series: {
        pie: { 
            show: true
        }
    }
});

if (isNaN(somePlot.getData()[0].percent)){
    var canvas = somePlot.getCanvas();
    var ctx = canvas.getContext("2d");  //canvas context
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    ctx.font = '30pt Calibri';
    ctx.textAlign = 'center';
    ctx.fillText('No Data!', x, y);
}

产生( fiddle here ):