定制的交互式输入范围与谷歌图（饼图）

Question

怎样才能结合了自定义的输入范围与谷歌图表饼图来创建一个交互式图形？

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

var PercentageDeterminedBySlider将是通过改变5.根据滑块位置1饼图然后将显示这个百分比百分比变量。

为饼图代码

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