2
Google Lineチャートの凡例でシリーズがクリックされると、データのトレンドラインの上にラインが表示されるようです。この動作を停止することは可能ですか?私はドキュメントで何かを見つけることができませんでした。Google Line Chartの凡例クリックに表示されるラインを無効にする
Google Lineチャートの凡例でシリーズがクリックされると、データのトレンドラインの上にラインが表示されるようです。この動作を停止することは可能ですか?私はドキュメントで何かを見つけることができませんでした。Google Line Chartの凡例クリックに表示されるラインを無効にする
伝説がクリックされたときに、シリーズ全体が選択され、
行の値がnull
chart.getSelection()
が何かのように返されますことを意味している...
{row: null, column 1}
とデータポイントをクリックしたとき/選択された行番号の参照row: 1
などがあります...
など、行が
chart.setSelection([]);
作業スニペット以下参照nullの場合'select'
イベントリスナーを使用して選択を解除...
google.charts.load('current', {
callback: function() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', label: 'Year'});
// series 0
dataTable.addColumn({type: 'number', label: 'Category A'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// series 1
dataTable.addColumn({type: 'number', label: 'Category B'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// series 2
dataTable.addColumn({type: 'number', label: 'Category C'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
dataTable.addRows([
['2014', 1000, null, 2000, null, 3000, null],
['2015', 2000, null, 4000, null, 6000, null],
['2016', 3000, null, 6000, null, 9000, null],
]);
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
dataTable.setValue(i, 2, getTooltip(i, 1));
dataTable.setValue(i, 4, getTooltip(i, 3));
dataTable.setValue(i, 6, getTooltip(i, 5));
}
function getTooltip(rowIndex, columnIndex) {
return '<div class="ggl-tooltip"><span>' +
dataTable.getValue(rowIndex, 0) + ': </span>' +
dataTable.getFormattedValue(rowIndex, columnIndex) + '</div>';
}
// use 'select' listener to disable selection on legend click
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
if (selection[0].row === null) {
chart.setSelection([]);
}
}
});
chart.draw(dataTable, {
legend: {
position: 'bottom'
},
pointSize: 4,
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
うん、THI完璧に働いた。本当にありがとう! – n00b