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

Question

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

目标是饼图根据“输入范围”的位置显示不同的百分比。

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);">

点击下方查看示例

示例图片

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

Answer 1

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

1. 您可以使用 document.querySelector('#points').value 获取 var PercentageDeterminedBySlider。
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