高级图表:生成空白图表

Question

我的应用程序接收动态数据并生成一个图表，其中有一个选项可以使用chart.renderer.text()显示覆盖在顶部的消息。

有时，对数据的动态请求格式错误，结果数据不可靠，因此在这种情况下，我希望生成一个完全空白的图表(具有自定义的背景颜色)，其宽度和高度与最初请求的宽度和高度相同(请求的这一部分通常是确定的)，并且只需要上面描述的消息覆盖来向用户显示消息。

最简单的方法是什么？我想要空白图表真的是.只是一种没有轴或任何东西的纯色，也没有关于“没有数据可显示”的信息，这是我在寻找答案时发现的几个例子中看到的。在空白背景的顶部(用用户定义的宽度和高度)覆盖我的消息。

Answer 1

这将是最容易创造的..。空图表。然后在load事件中向图表添加必要的文本。就像这样：http://jsfiddle.net/zkj36o7e/1/

$('#container').highcharts({
    chart: {
        events: {
            load: function () {
                var text = this.renderer.text("Malformed data").attr({
                    'text-anchor': "middle",                 // SVG's text-align ;)
                    stroke: "black",                         // color
                    opacity: 0,                              // smooth animation - part I  
                    x: this.plotWidth / 2 + this.plotLeft    // x-center of the plot
                }).add(),
                    bbox = text.getBBox();                   // get bounding box of the created text 

                text.attr({
                    y: this.plotHeight / 2 - bbox.height / 2 // y-position - half of the text's height
                }).animate({
                    opacity: 1                               // smooth animation - part II
                });
            }
        }
    }
});