как построить значение данных из JSON в Highcharts

0

Я написал jquery как:

$(function () {
var data = [
{"series_name":"Actual","period_name":"Q1 / 2013","period_final_value":"17"},
{"series_name":"Actual","period_name":"Q2 / 2013","period_final_value":"15"},
{"series_name":"Actual","period_name":"Q3 / 2013","period_final_value":"13"},

{"series_name":"Alarm","period_name":"Q1 / 2013","period_final_value":"14.103"},
{"series_name":"Alarm","period_name":"Q2 / 2013","period_final_value":"14.404499999999999"},
{"series_name":"Alarm","period_name":"Q3 / 2013","period_final_value":"14.966999999999999"},

{"series_name":"Target","period_name":"Q1 / 2013","period_final_value":"15.67"},
{"series_name":"Target","period_name":"Q2 / 2013","period_final_value":"16.005"},
{"series_name":"Target","period_name":"Q3 / 2013","period_final_value":"16.63"}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
     cat = '' + data[i].period_name;
     if(xCategories.indexOf(cat) === -1){
        xCategories[xCategories.length] = cat;
     }
}
for(i = 0; i < data.length; i++){
    if(seriesData){
      var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].series_name;});
      if(currSeries.length === 0){
          seriesData[seriesData.length] = currSeries = {name: data[i].series_name, data: []};
      } else {
          currSeries = currSeries[0];
      }
      var index = currSeries.data.length;
      currSeries.data[index] = data[i].period_final_value;
    } else {
       seriesData[0] = {name: data[i].series_name, data: [data[i].period_final_value]}
    }
}
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: xCategories
        },
        yAxis: {
            min: 0,
            max: 30,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -100,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },

        series: seriesData
    });
});

});

приведенный выше код также состоит из формата данных JSON. но значения не отображаются. графики графиков X-оси с Q1 Q2 и Q3 и осью Y, также Серии отображаются в легенде, но код не имеет столбцов на экране. любая помощь оценивается. Спасибо.

  • 1
    Проверьте, получили ли вы данные серии в правильном формате для старших карт
  • 0
    @ManuM спасибо. это работает ................... проверить Fiddle @ jsfiddle.net/PrasadSS/UMeGS/55
Показать ещё 1 комментарий
Теги:
highcharts

1 ответ

0

Вам нужно использовать числа вместо строк, поэтому каждое значение точки y должно анализироваться parseFloat() для достижения правильного значения.

Как выглядит ваш seriesData [0] на выходе?

  • 0
    Пожалуйста, посмотрите на мой здесь
  • 0
    Извините, я не знаком с моментом. Даты могут быть проанализированы путем разделения текста и использования Date.UTC () или Date.parse ().
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню