Панель инструментов с возможностью выбора типа диаграммы Google

Question

Панель инструментов с возможностью выбора типа диаграммы Google

1

Я не знаком с диаграммами Google, поэтому извините меня, если этот вопрос слишком широк или бессмыслен.

Мне интересно, как можно создать панель инструментов google chart с типом диаграммы, выбираемым из списка возможных диаграмм. Для того же набора данных должны отображаться все применимые типы диаграмм, и пользователь выбирает тот, который ему нужен. После этого данные автоматически отображаются в соответствии с выбранной диаграммой.

Например, проверьте визуализацию результатов запроса SPARQL в GraphDB, результаты любого запроса можно визуализировать с помощью набора соответствующих диаграмм Google, которые можно было бы выбрать и даже настроить. Чтобы попробовать, в правом верхнем углу панели редактирования запроса есть значок папки, в котором вы можете выбрать сохраненный запрос, а затем в нижней части панели выбрать диаграммы Google и настроить затем визуализировать результаты.

Является ли это компонентом, который уже существует, и я могу использовать его? Какие-либо предложения?

Median Hilal 08 июнь 2017, в 17:35

Источник

Теги:

javascript

charts

google-visualization

pygooglechart

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2017-06-08T15-14-00.000Z

вы можете использовать класс 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>