如何在高图中的图表中间添加文本

Question

考虑这个jsfiddle

Highcharts.chart('container', {
    chart: {
        plotBorderWidth: 1,
        marginLeft: 80
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: 'Title aligned left',
        align: 'left',
        x: 70
    },
    series: [{
        //data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

如果数据为空，我希望在图表中间有一个默认文本。

有没有办法实现这个目标？

Answer 1

有一个名为no-data-to-display.js的特定模块，您可以自定义文本：

Highcharts.setOptions({
    lang:{
        noData:'Something is missing !' // Your text when there is no data
    }
});

Fiddle

Answer 2

当您没有数据时，可以使用loading选项在图表中间显示一些文字：

lang:{
    loading: 'your text here'
},

然后在没有数据时调用showLoading()来显示此文本。 Here是如何自定义加载文本的文档。

工作示例：

＆＃13;

＆＃13;

let my_chart = Highcharts.chart('container', {
    chart: {
        plotBorderWidth: 1,
        marginLeft: 80
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: 'Title aligned left',
        align: 'left',
        x: 70
    },
    lang:{
    	loading: 'your text here'
    },
    series: [{
        //data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

if (!my_chart.series[0].data.length)
    my_chart.showLoading()

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

＆＃13;

＆＃13;

＆＃13;