我不熟悉Google图表,所以请对不起,如果这个问题某种程度上过于广泛或毫无意义。
我想知道如何在可能的图表列表中选择可选的图表类型的Google图表仪表板。对于相同的数据集,应显示所有适用的图表类型,并且用户选择他想要的图表。之后,根据所选的图表自动渲染数据。
例如,检查可视化SPARQL查询结果在GraphDB中,可以使用一组可以选择甚至配置的相应的Google图表来可视化任何查询的结果。要尝试一下,在查询编辑窗格的右上角,有一个文件夹图标,您可以在其中选择保存的查询,然后在窗格的底部选择Google图表并配置然后呈现结果。
。这是已经存在的组件,我可以使用吗?有任何建议吗?
您可以从'controls'
软件包中使用ChartWrapper
类
它具有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="https://www.gstatic.com/charts/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>