Я не знаком с диаграммами Google, поэтому извините меня, если этот вопрос слишком широк или бессмыслен.
Мне интересно, как можно создать панель инструментов google chart с типом диаграммы, выбираемым из списка возможных диаграмм. Для того же набора данных должны отображаться все применимые типы диаграмм, и пользователь выбирает тот, который ему нужен. После этого данные автоматически отображаются в соответствии с выбранной диаграммой.
Например, проверьте визуализацию результатов запроса SPARQL в GraphDB, результаты любого запроса можно визуализировать с помощью набора соответствующих диаграмм Google, которые можно было бы выбрать и даже настроить. Чтобы попробовать, в правом верхнем углу панели редактирования запроса есть значок папки, в котором вы можете выбрать сохраненный запрос, а затем в нижней части панели выбрать диаграммы Google и настроить затем визуализировать результаты.
Является ли это компонентом, который уже существует, и я могу использовать его? Какие-либо предложения?
вы можете использовать класс ChartWrapper
из пакета 'controls'
он имеет свойство chartType
...
var chart = new google.visualization.ChartWrapper({
chartType: 'BarChart', // <-- chart type property
containerId: 'chart',
dataTable: data,
options: {
height: 240,
theme: 'maximized'
}
});
см. следующий рабочий фрагмент, тип диаграммы изменяется на <select>
google.charts.load('current', {
callback: drawChart,
packages: ['controls', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
['a', 898],
['b', 37319],
['c', 8980],
['d', 35400]
]);
var chartType = document.getElementById('chart-type');
var chartWrapper = new google.visualization.ChartWrapper({
chartType: chartType.value,
containerId: 'chart',
dataTable: data,
options: {
height: 240,
theme: 'maximized'
}
});
chartType.addEventListener('change', drawChartWrapper, false);
drawChartWrapper();
function drawChartWrapper() {
chartWrapper.setChartType(chartType.value);
chartWrapper.draw();
}
}
div {
padding: 6px;
}
<script src="/loader.js"></script>
<div>
<select id="chart-type">
<option value="BarChart" selected>Bar</option>
<option value="ColumnChart">Column</option>
<option value="LineChart">Line</option>
<option value="PieChart">Pie</option>
</select>
</div>
<div id="chart"></div>