定制的交互式输入范围与谷歌图(饼图)
问题描述:
怎样才能结合了自定义的输入范围与谷歌图表饼图来创建一个交互式图形?定制的交互式输入范围与谷歌图(饼图)
目标是让饼图根据“输入范围”的位置显示不同的百分比。
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);">
点击下面看例如
示例图像
最后,有一个滑动件(又名输入范围)与谷歌网站上谷歌图表集成,但其功能似乎是非常有限的。所以这里的目标是创建一个自定义滑块。
答
如果我正确理解你,你的代码中有一些问题。这里有一些:
- 你可以使用
document.querySelector('#points').value
得到varPercentageDeterminedBySlider
。 - 当输入变化时,您可以再次调用方法
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
我觉得这是真棒。我会测试它,然后给出更多的反馈。非常感激。 –
我的荣幸:)我希望它能回答你的问题..让我知道.. –