我正在尝试绘制Google图表，该图表会在单击按钮时更改值。我尝试了以下代码，但没有用。
如何使按钮起作用，如何使文本从“重力”更改为“体积”？
加载图表库：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
我的数据如下：
// Chart Data
var rowData1 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
['1000', '217', 'Gravimetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
['1500', '203', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
var rowData2 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
['800', '190', 'Volumetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
['1200', '150', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Gravimetric' : 'Volumetric') + ' Densities';
});
options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
HTML看起来像：
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div style="text-align: center;"><button id="b1" style="background: #ea5b0c; color: #ffffff; font-family: 'Big John'; font-size: 18;">Click</button></div>
</body>
不确定从何处调用drawChart函数...
google.charts.setOnLoadCallback(drawChart);
为了简化起见，只需使用load语句返回的诺言即可。
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
... add code here ...
});
下一个，options对象在创建之前就被使用过，这里...
options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';
应该是...
var options = {};
options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
// Chart Data
var rowData1 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
['1000', '217', 'Gravimetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
['1500', '203', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
var rowData2 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
['800', '190', 'Volumetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
['1200', '150', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready', function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Gravimetric' : 'Volumetric') + ' Densities';
});
var options = {};
options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div style="text-align: center;"><button id="b1" style="background: #ea5b0c; color: #ffffff; font-family: 'Big John'; font-size: 18;">Click</button></div>