Изменение названия и цвета серии в Highcharts

У меня на диаграмме отображается несколько рядов, но я не могу понять, как изменить имя или другие атрибуты для каждого ряда. В легенде они просто представлены как серия 1, серия 2 и серия 3.

Вот мой код:

 <script type="text/javascript">
$(function() {

    $.getJSON('decodeseries.php', function(data) {
        // Create the chart
         $('#container').highcharts({
            chart: {
                type: 'area'        
            },
            yAxis: {title: {text: 'Wave Height ( In Ft )'}},
            xAxis: {type: 'datetime'},

            title : {
                text : '5 Day Forecast'
            },



            series: data [{
                name: 'Location 1',
                data: data

            }, {
                name: 'Location 2',
                data: data


            }, {
                name: 'Location 3',
                data: data


            }]
        });

    });

});
        </script>

JSon:

[{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}]

Это на самом деле не показывает диаграмму, но это то, что я пытался до сих пор. Диаграмма работает с приведенным выше JSON, когда я просто использую следующее:

series: data

Любая помощь будет оценена по достоинству!

Спасибо


javascript charts series highcharts
person MacD    schedule 27.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы установить цвет/имя ряда данных в элементе data, вам необходимо присвоить ему эти свойства. Насколько я могу судить, ваш data JSON на самом деле состоит из 3 серий данных:

[
{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}
]

Я бы изменил его (как бы он ни был сделан) на это:

[
{"name":"Location 1", "color": "acolor", "data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"name":"Location 2", "color": "anothercolor", "data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"name":"Location 3", "color": "yetanothercolor", "data":[[1385510600000,1.88],[1385521500000,0.792]]}
]

Вышеприведенный код диаграммы не отображается, потому что вы делаете:

    series: data [{
        name: 'Location 1',
        data: data
    }, {
        name: 'Location 2',
        data: data
    }, {
        name: 'Location 3',
        data: data
    }]

И он пытается присвоить свойство data в data series.data, что недопустимо. По сути, вы говорите, что каждая из 3 серий.данные = серия.данные.данные.

Используя мой пример выше, сделайте что-то вроде:

$('#container').highcharts({
            chart: {
                type: 'area'        
            },
            yAxis: {title: {text: 'Wave Height ( In Ft )'}},
            xAxis: {type: 'datetime'},  
            title : {
                text : '5 Day Forecast'
            },
            series: data 
        });
person wergeld    schedule 27.11.2013
comment
Именно то, что мне нужно было знать. Спасибо! - person MacD; 28.11.2013
comment
Могу ли я таким же образом контролировать тип диаграммы для каждой серии? (линия, сплайн, площадь и т. д.) - person MacD; 28.11.2013
comment
Правильный. Ознакомьтесь с документацией по API здесь: api.highcharts.com/highcharts#series. Много полезной информации и примеров. - person wergeld; 28.11.2013