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
                });
            }
        }
    }
});

Highcharts：生成空白图表

1 个答案: