使用Google Charts自定义交互式输入范围（饼图）

Question

如何将自定义输入范围与Google图表饼图相结合以创建交互式图表？

目标是饼图根据＆＃34;输入范围的位置显示不同的百分比。＆＃34;

var PercentageDeterminedBySlider将是一个百分比变量，它根据滑块位置1到5而变化。然后饼图将显示此百分比。

饼图的

代码

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChartPie);

function drawChartPie() {

  var profitVar2 = PercentageDeterminedBySlider;
  var other= 100-profitVar2;

  var data3 = google.visualization.arrayToDataTable([
    ['Name', 'Profit Percentage'],
    ['Your Profit Percentage' , profitVar2],
    ['Potential for Growth', other]
  ]);

  var options3 = {
    title: 'Profit Percentage',
    legend: 'none',
    is3D: true,
    pieSliceText: 'value',
  };

  var chart3 = new google.visualization.PieChart(document.getElementById('chart_divPie'));

  chart3.draw(data3, options3);
}

输入范围的

代码

<label for="points">Rating:</label>
<input type="text" id="textInput" value="5">
<input type="range" name="points" id="points" value="5" min="1" max="5" onchange="updateTextInput(this.value);">

点击下方查看示例

示例图片

最后，谷歌网站上有一个与谷歌图表集成的滑块（也就是输入范围），但它的＆＃39;功能似乎非常有限。所以这里的目标是创建一个自定义滑块。

Answer 1

如果我理解正确，您的代码中会出现一些问题。这是一些：

1. 您可以使用PercentageDeterminedBySlider获取var document.querySelector('#points').value。
2. 当输入更改时，您可以再次调用方法drawChartPie。它将采用range。
的更新值

注意您需要使用praseInt将范围的值转换为int，以便图表可以正常工作。

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChartPie);

function drawChartPie() {
  var profitVar2 = parseInt(document.querySelector('#points').value);
  var other = 100 - profitVar2;

  var data3 = google.visualization.arrayToDataTable([
    ['Name', 'Profit Percentage'],    
    ['Your Profit Percentage' , profitVar2],
    ['Potential for Growth', other]
  ]);

  var options3 = {
    title: 'Profit Percentage',
    legend: 'none',
    is3D: true,
    pieSliceText: 'value',
  };

  var chart3 = new google.visualization.PieChart(document.getElementById('chart_divPie'));

  chart3.draw(data3, options3);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<label for="points">Rating:</label>
<input type="text" id="textInput" value="5">
<input type="range" name="points" id="points" value="5" min="1" max="5" onchange="drawChartPie()">
<div id="chart_divPie"></div>
Click

http://output.jsbin.com/fawehez