Google Chart API - изменение значения с помощью мыши (setValue)

Я создал диаграмму пончиков из API графиков Google. При нажатии на каждый срез он должен увеличиться на 10 единиц и уменьшить смежный срез (по часовой стрелке) на 10 единиц. То, что я до сих пор представляет собой всплывающее окно с предупреждением, которое объясняет это, но я хотел бы перерисовать диаграмму с новыми значениями.Google Chart API - изменение значения с помощью мыши (setValue)

Вот мой код:

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Option'); 
     data.addColumn('number', 'Value'); 
     data.addRows([ 
      ['Option A', 40], 
      ['Option B', 30], 
      ['Option C', 30] 
     ]); 

     // Set chart options 
     var options = { 
      height: 300, 
      fontName: 'Lato, sans-serif', 
      title: 'Values per option', 
      titleTextStyle: { 
      color: '#5a5a5a', 
      fontSize: 20, 
      bold: true, 
      align: 'center' 
      }, 
      pieHole: 0.6, 
      slices: { 
      0: {color: 'red'}, 
      1: {color: 'blue'}, 
      2: {color: 'green'} 
      }, 
      legend: { 
      position: 'bottom', 
      textStyle: { 
       color: '#5a5a5a', 
       fontSize: 14 
      } 
      }, 

      enableInteractivity: true, 
      pieSliceText: 'none' 
     }; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 

     function selectHandler() { 
      var selectedItem = chart.getSelection()[0]; 
      if (selectedItem && selectedItem.row <2) { 
      var activeTrait = data.getValue(selectedItem.row, 0); 
       activePerc = data.getValue(selectedItem.row, 1); 
       activePercNew = parseInt(activePerc)+10 
       adjaceTrait = data.getValue(selectedItem.row+1, 0); 
       adjacePerc = data.getValue(selectedItem.row+1, 1); 
       adjacePercNew = parseInt(adjacePerc)-10 

      alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.'); 
      } 

      if (selectedItem && selectedItem.row == 2) { 
      var activeTrait = data.getValue(selectedItem.row, 0); 
       activePerc = data.getValue(selectedItem.row, 1); 
       activePercNew = parseInt(activePerc)+10 
       adjaceTrait = data.getValue(selectedItem.row-2, 0); 
       adjacePerc = data.getValue(selectedItem.row-2, 1); 
       adjacePercNew = parseInt(adjacePerc)-10 

      alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.'); 
      } 
     } 

     google.visualization.events.addListener(chart, 'select', selectHandler); 
     chart.draw(data, options); 
     } 

    </script> 
    </head> 
    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:800; height:300"></div> 
    </body> 
</html>

Я хотел бы, чтобы изменить выбранные и смежные ломтики, нажав на один срез. Не уверен, что я должен создать var newdata с измененными значениями и использовать chart.draw (newdata, option)?

источник

2014-10-01 wernerfeuer

Да, вы очень много там, и вы определенно на правильном пути с вашим ответом. Вы можете использовать data.setValue(), чтобы настроить значения, то вы бы что-то подобное в вашей второй «если» заявление:

data.setValue(selectedItem.row,1, activePercNew); 
    data.setValue(selectedItem.row-2,1, adjacePercNew); 
    chart.draw(data, options); 
    // the thing we just clicked on was redrawn so it lost its handler, reinstate it: 
    google.visualization.events.addListener(chart, 'select', selectHandler);

И то же самое в первой, но с selectedItem.row + 1 вместо SelectedItem .row-2. Или, в идеале, аккуратно, что раздел немного, поэтому два оператора if выясняют, к каким вещам вы обращаетесь, а затем к одному биту кода выполняет перерисовку. Например, вот скорректированная функция обработчика, которая также не зависит от наличия 3-х секций:

function selectHandler() { 
    var selectedItem = chart.getSelection()[0]; 
    var numRows = data.getNumberOfRows(); 
    // verify the selection isn't inexplicibly invalid 
    if (selectedItem && selectedItem.row < numRows && selectedItem.row >= 0) { 
    // find the two items we're looking at 
    var curItem = selectedItem.row; 

    // we either want selected.row + 1 or we want 0 if the selected item was the last one 
    var otherItem = selectedItem.row == numRows - 1 ? 0 : selectedItem.row + 1; 

    // calculate the new values 
    var activePerc = data.getValue(curItem , 1); 
    var activePercNew = parseInt(activePerc)+10; 
    var adjacePerc = data.getValue(otherItem , 1); 
    var adjacePercNew = parseInt(adjacePerc )-10; 

    // update the chart 
    data.setValue(curItem,1, activePercNew); 
    data.setValue(otherItem,1, adjacePercNew); 
    chart.draw(data, options); 
    // the thing we just clicked on was redrawn so it lost its handler, reinstate it: 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
    } 
}

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

источник

2014-10-01 08:13:16 HeatherEMSL

Благодарим вас! Это именно то, что мне нужно! Ваша предлагаемая функция работает отлично. Я добавил anotherItemValue и поместил его в оператор if. Если это было 0, то другой элемент должен измениться на numRows - (curItem + otherItem). Это позаботилось о проблеме, если срез был принудительно равен нулю. Я также остановил скрипт, если activePerc достиг 0. И поместил кнопку сброса. Еще раз спасибо! – wernerfeuer

Google Chart API - изменение значения с помощью мыши (setValue)

ответ

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