仪表盘可选择谷歌图表类型(Dashboard with selectable Google char

我不熟悉谷歌的图表，所以原谅我，如果这个问题是有点过于宽泛或毫无意义的。

我想知道它是如何可能创建与图表类型从可能图表的列表选择一个谷歌的图表仪表盘。为同一组数据的，所有适用的图表类型应被示出和用户选择他想要的一个。随后，数据被根据所选择的图表自动呈现。

例如，检查在GraphDB可视SPARQL查询结果，任何查询的结果可以用一组相应的可能被选择，甚至配置谷歌的图表来可视化。要尝试，在查询编辑窗口的右上角，有一个文件夹图标，你可以选择一个保存查询，然后在窗格底部选择谷歌的图表和配置然后渲染的结果。

这是一个已经存在，我可以用一个组成部分？有什么建议么？

你可以使用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="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>