我在Highcharts和Google 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;