Question

我使用chart.Js来显示我的图表。我通过ajax获取我的图表数据并以图形方式呈现它以显示数据

我的问题是，在我的Ajax什么也没有返回任何内容的情况下，我的图表只显示X轴和Y轴，没有数据或没有显示图例。有没有显示默认文字的选项？

PS：我知道我可以添加一些条件语句并显示＆＃34;没有图表Div＆＃34;并隐藏我的＆＃34;图表div＆＃34;，但我也是一些干净的方法来做同样的事情。

Answer 1

您可以尝试此解决方案：

if(1 < chartData.labels.length) {
    chart = new Chart(options.ctx).Line(chartData, options.chartOptions);
} else {
    options.ctx.font = "20px " + Chart.defaults.global.tooltipTitleFontFamily;
    options.ctx.textAlign = "center";
    options.ctx.textBaseline = "middle";
    options.ctx.fillStyle = Chart.defaults.global.scaleFontColor;
    options.ctx.fillText("No data in chart.", options.ctx.canvas.clientWidth / 2, options.ctx.canvas.clientHeight / 2);
}

Answer 2

这对我有用，我希望有所帮助

Chart.pluginService.register({
afterDraw: function (chart) {
                if (chart.data.datasets[0].data.length === 0) {
                    // No data is present
                    var ctx = chart.chart.ctx;
                    var width = chart.chart.width;
                    var height = chart.chart.height
                    chart.clear();

                    ctx.save();
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.font = "20px normal 'Helvetica Nueue'";
                    ctx.fillText('No data to display', width / 2, height / 2);
                    ctx.restore();
                }

            }
});

Chart.js显示无图表数据时的默认值

2 个答案: