Highcharts是否支持Google图表中的控件和信息中心?

时间:2015-10-28 09:46:17

标签: javascript highcharts google-visualization

我在HighchartsGoogle Charts之间摇摆,以显示我的数据。我喜欢Highcharts制作的图表,但我想知道Highcharts是否支持Google Charts中的Controls and Dashboard等功能。

下面是Google图表中控件和信息中心的外观演示。如果您运行代码段,则可以看到两个控件(范围滑块和性别过滤器)和两个图表(饼图和表格图表)。我们可以使用滑块和过滤器来控制图表的显示方式。

Highcharts可以这样做吗?我似乎没有找到任何相关的文件。如果可以的话,我们非常感谢任何示例代码。



       // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {
        'packages': ['controls']
      });

       // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

       // Callback that creates and populates a data table,
       // instantiates a dashboard, a range slider and a pie chart,
       // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Gender', 'Age', 'Donuts eaten'],
          ['Michael', 'Male', 12, 5],
          ['Elisa', 'Female', 20, 7],
          ['Robert', 'Male', 7, 3],
          ['John', 'Male', 54, 2],
          ['Jessica', 'Female', 22, 6],
          ['Aaron', 'Male', 3, 1],
          ['Margareth', 'Female', 42, 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
          document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a category filter for gender
        var genderFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'cfilter_div',
          'ui': {
            allowMultiple: false,
            labelStacking: 'vertical'
          },
          'options': {
            'filterColumnLabel': 'Gender'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          },
          'view': {
            'columns': [0, 3]
          }
        });

        var tableChart = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'table_div'
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, [pieChart, tableChart]);
        dashboard.bind(genderFilter, [pieChart, tableChart]);

        // Draw the dashboard.
        dashboard.draw(data);
      }

<script src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
  <table>
    <tr>
      <td>
        <div id="filter_div"></div>
      </td>
      <td>
        <div id="cfilter_div"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="chart_div"></div>
      </td>
      <td>
        <div id="table_div"></div>
      </td>
    </tr>
  </table>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案