2017-01-25 2 views
0

Я использую диаграмму столбца с ползунком, который перерисовывает диаграмму после вызова операции слайда. Я храню каждый массив данных в объекте javascript, а диаграмма отображает в соответствии с параметром ползунка. После присвоения начальных значений для первого параметра ползунка диаграмма отображается правильно, но когда я вернусь в первую позицию, диаграмма не будет отображаться. И странная часть - это когда я назначаю начальные значения отдельной переменной, а параметр данных присваивается этой переменной, диаграмма правильно отображается в каждой позиции. Вот код:Проблемы с series.data в highcharts

var data = { 
         "jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0], 
         "feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25], 
         "mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15], 
         "apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30], 
         "may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43], 
         "jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57], 
         "jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312], 
         "aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30], 
         "sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30], 
         "oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30], 
         "nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30], 
         "dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30] 
        }; 
var someData = [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0]; 

var chart = new Highcharts.chart({ 
        chart: { 
         renderTo: 'container', 
         type: 'column', 
         marginTop: 50, 
         marginLeft: 100, 
         marginBottom: 50 
        }, 
        title: false, 

        exporting: {enabled: false}, 
        xAxis: { 
         crosshair: true, 
         tickColor: '#7F7F7F', 
         lineColor: '#7F7F7F', 
         tickWidth: 0, 
         labels: { 
          step: 5 
         }, 
         title: { 
          text: 'x-axis', 
          align: "left", 
          x: -10, 
          rotation: 0, 
          style: { 
           "font-size" : "15px" 
          } 
         } 
        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: 'y-axis', 
          align: 'high', 
          rotation: 0, 
          y: -10, 
          offset: 0, 
          style: { 
           "font-size" : "15px" 
          } 
         }, 
         gridLineColor: 'transparent', 
         lineColor: '#7F7F7F', 
         lineWidth: 1, 
         tickWidth: 1, 
         tickColor: '#7F7F7F', 
         gridLineWidth: 0, 
         minorGridLineWidth: 0, 
         labels: { 
          step: 2, 
          formatter: function(){ 
           if(this.value > 999) 
            return Math.round(this.value/1000) + 'k'; 
           return this.value; 
          } 
         } 
        }, 
        tooltip: { 
         enabled: false 
        }, 
        plotOptions: { 
         column: { 
          pointPadding: 0.2, 
          borderWidth: 0 
         }, 
         series: { 
          colorByPoint: true 
         } 
        }, 
        series: [{ 
         showInLegend: false, 
         data: someData 
        }], 
        credits: false 
       }); 

$('#slider_bar').on("slide", function() { 
        chart.series[0].setData(data[document.getElementById('value').innerHTML]); 
}); 

Исходное положение ползуна на ян и график делает правильно, когда я скольжу назад Ян. Я хотел бы знать, почему диаграмма не будет отображаться, когда я назначу series.data как:

data: data.jan 

Любые предложения?

ответ

0

Highchart series.data ожидает ключевое значение пары, или массив массивов, как

[[x1,y1],[x2,y2]] 

или

{ 

y: [x1,x2] 
} 

теперь, когда вы data = data.jan Highchart не в состоянии найти значение Y, потому что data.jan - простой массив

+0

Как некоторые данные отличаются от data.jan? – wolfsbane

0

Найдено результатов:

вместо написания

data: data.jan 

записи

data: data.jan.slice() 

Функция среза непосредственно не возвращает ссылку на массив, вместо этого он возвращает копию массива. Я все еще удивляюсь, почему мы должны использовать функцию среза в первую очередь, для этой конкретной ситуации, но она работает.

Смежные вопросы