Question

我在我的图表运行的代码中获取数据，我在X轴上添加MAX值和最小值的标志，现在我想在flag内显示评级。但是这里我的catagories数据来了，但评级未来在flag.here我的数据和评级是动态数据不是静态的。我已经尝试过堆栈溢出建议，以及包含highstock.js和highcharts.js文件，但它仍然无法正常工作。请给我适当的柱形图解决方案。

  $(document). ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'column',
                marginRight: 130,
                marginBottom: 50
            },
            title: {
                text: 'Top 15 Projects Facilities Rating',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Facilities Rating'
                },
               stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            plotOptions:{
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color:'white'
                }
            }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                borderWidth: 0
            },
            series: [{
                name:'RATING',
                data:[],
                id:'dataseries'
           },
    {      
    type: 'flags',
    onSeries: 'dataseries',
    data: [{
        x: 0,
        text: 'Minimum Facilites Rating',
        title: 'Min'
    }, {
        x: 15,
        text: 'Maximum Facilites Rating',
        title: 'max'
    }],
    width: 30,
    showInLegend: false
    }]
        }

        $.getJSON("bargraph_data.php", function(json) {
            options.xAxis.categories = json[0]['data'];
           // options.series.splice(0,0, json[1]);
            options.series[0].data = json[1]['data'];

            chart = new Highcharts.Chart(options);

        });
    });

你也可以在[link] http://jsfiddle.net/sunitasingh/n3U77/3/中查看请给我解决方案，我如何将y值添加到标志系列点动态而非静态。

Answer 1

您正在按默认系列覆盖标记..请检查以下行：

options.series[0] = json[1];

它将用新系列替换标志。我想你需要预先添加选项，如下所示：

options.series.splice(0, 0, json[1]);

如何在highcharts中的flag系列中添加动态数据

1 个答案: