Как сгруппированные переменные штрих-кода pinPoint

Question

Я пытаюсь изменить высоту баров на основе ползунка, который пользователи могут вручную обрабатывать.

http://jsfiddle.net/h0ow9kLk/2/ Коды для примера:

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    <form oninput="output1.value=slider1.value"> 
     <input type="range" name="slider1" id="slider1" min="17" max="25"/> 
     <output name="output1" for="slider1"></output> 
    </form> 
    <form oninput="output2.value=slider2.value" > 
     <input type="range" name="slider2" id="slider2" min="5000" max="5000" step="5"/> 
     <output name="output2" for="slider2"></output> 
    </form> 
<button id="updater">Update</button> 

Javascript

$(function() { 
    $('#container').highcharts({ 

     chart: { 
      type: 'column' 
     }, 

     title: { 
      text: 'Total fruit consumtion, grouped by gender' 
     }, 

     xAxis: { 
      categories: ['Resistance', 'FuelConsumed', 'FuelCost', 'Grapes', 'Bananas'] 
     }, 

     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Number of fruits' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.x + '</b><br/>' + 
        this.series.name + ': ' + this.y + '<br/>' + 
        'Total: ' + this.point.stackTotal; 
      } 
     }, 

     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 

     series: [{ 
      name: 'Ship 1', 
      data: [5, 3, 4, 7, 2], 
      stack: 'Ship 1' 
     }, 
       { 
      name: 'Ship 2', 
      data: [3, 0, 4, 4, 3], 
      stack: 'Ship 2' 
     }] 

    }); 
    var $slider = $("#updater"); 

        $slider.bind('click', function(e) { 
        e.preventDefault(); 

       var speed = $("#slider1").val(); 
       var weight = $("#slider2").val(); 
       var fuel; 

         if(weight == 5000){ 

         if  (speed == 17){fuel = 41; } 
         else if(speed == 18){fuel = 51; } 
         else if(speed == 19){fuel = 60; } 
         else if(speed == 20){fuel = 75; } 
         else if(speed == 21){fuel = 80; } 
         else if(speed == 22){fuel = 100; } 
         else if(speed == 23){fuel = 120; } 
         else if(speed == 24){fuel = 138; } 
         else if(speed == 25){fuel = 153; } 

         } 
         else{ fuel = 0;} 
         chartColumn.series[0].data[0].value[0].update(parseInt(fuel)); 
        nv.utils.windowResize(chart.update);  
       }); 
}); 

Так код обновления: chartColumn.series [0] .data [0] .value [ 0] .update (ParseInt (топливо));

внизу используется, чтобы попытаться обновить первый бар. Однако я предполагаю, что путь неправильный. Бар не меняется по высоте.

Пример того, что им пытаются сделать это http://jsfiddle.net/ZmnWq/74/

Есть ли где я могу узнать, как добраться до данных, используя правильный путь, и если возможно, кто-то может сказать мне, как изменить значение данных.

Этот вопрос звучит довольно простой, но я действительно новичок в этом. Вся помощь приветствуется!

Спасибо!

Answer 1

В вашем примере только удаление значений [0] будет работать. Вам нужно назначить ваш высокий уровень для какого-либо объекта (в вашем примере chartColumn), чтобы впоследствии можно изменить значения на основе этого объекта диаграммы. В вашем случае это не определено.

Чтобы добавить новую точку в свою серию, вы можете использовать нижеприведенный код. Подробности можно найти: here.

chartColumn.series[0].addPoint([x, 5], false, true); 

Чтобы добавить всю новую серию, вы можете добавить код ниже.

chartColumn.addSeries({ 
    name: "ship 3", 
    data: [4,5,6,7,8] 
}, false); 

chartColumn.redraw(); 

Чтобы изменить всю серию новыми значениями, вы можете использовать setData, которая будет автоматически перерисовывать диаграмму.

chartColumn.series[0].setData(data,true); 

Рабочая скрипка для примера можно найти here.

Для получения дополнительной информации о обновлении оси вы можете ознакомиться с документацией ниже.

http://api.highcharts.com/highcharts#Axis.update