具有可选 Google 图表类型的仪表板答案

【问题标题】：Dashboard with selectable Google chart type具有可选 Google 图表类型的仪表板
【发布时间】：2017-06-08 14:50:27
【问题描述】：

我不熟悉谷歌图表，如果这个问题过于宽泛或毫无意义，请原谅。

我想知道如何创建一个谷歌图表仪表板，其图表类型可从可能的图表列表中选择。对于同一组数据，应显示所有适用的图表类型，并由用户选择他想要的。之后，根据所选图表自动呈现数据。

例如，检查Visualizing SPARQL query results in GraphDB，任何查询的结果都可以使用一组可以选择甚至配置的相应谷歌图表来可视化。要尝试它，在查询编辑窗格的右上角，有一个文件夹图标，您可以在其中选择已保存的查询，然后在窗格底部选择谷歌图表并配置然后呈现结果。

这是一个已经存在并且我可以使用的组件吗？有什么建议吗？

【问题讨论】：

标签： javascript charts google-visualization pygooglechart

【解决方案1】：

您可以使用'controls' 包中的ChartWrapper class

它有一个chartType 的属性...

var chart = new google.visualization.ChartWrapper({
  chartType: 'BarChart',  // <-- chart type property
  containerId: 'chart',
  dataTable: data,
  options: {
    height: 240,
    theme: 'maximized'
  }
});

看下面的工作sn-p，图表类型由<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>

【讨论】：