谷歌图表:如何使用新材料图表的仪表板
Google charts: How to use dashboard with new Material charts?
仪表板似乎只是像"经典图表"那样使用旧的方式加载其库。如何让仪表板使用新的"Material"谷歌图表?特别是线图
材料图表jsfiddle:https://jsfiddle.net/yzhsf1gv/3/
仪表板jsiddle:https://jsfiddle.net/job30vwy/
我的猜测是
google.charts.load('current', {'packages': ['line', 'controls']});
但这似乎不起作用
似乎在这里工作。。。?
只需在ChartWrapper chartType
中指定材质图。。。
'chartType': 'Line',
与。
'chartType': 'LineChart',
使用与此处指定的类名相同-->
new google.charts.-->Line(document.getElementById('chart_div'))
来自小提琴叉
google.charts.load('current', {'packages':['line', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that programmaticSlider is visible to changeRange.
programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});
programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'Line',
'containerId': 'programmatic_chart_div',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'value'
}
});
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<table class="columns">
<tr>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
<div>
<button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
Select range [2, 5]
</button><br />
<button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
Make the pie chart 3D
</button>
</div>
<script type="text/javascript">
function changeRange() {
programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
programmaticSlider.draw();
}
function changeOptions() {
programmaticChart.setOption('is3D', true);
programmaticChart.draw();
}
</script>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>
相关文章:
- 使用外部数据创建仪表板(谷歌电子表格)-JavaScript
- Javascript库创建类似heroku仪表板的应用程序
- crm 2011使用javascript在仪表板上隐藏和显示子网格
- Mscrm 2011仪表板通过JavaScript或插件增加行数
- 谷歌图表可视化仪表板数据源问题
- 如何在谷歌仪表板表中为 TR 分配值
- 如何将面板添加到仪表板的特定列中
- 有角度的材料和仪表板
- 仪表板中的小部件和设置需要一个可维护的Javascript回发模式
- AngularJS在初始化仪表板控制器之前使用$htttp获取仪表板设置
- 谷歌图表:如何使用新材料图表的仪表板
- AngularJS仪表板和身份验证
- Ajax 请求仪表板页面上的浏览器崩溃
- 自定义 Umbraco 仪表板中的 JQuery UI Datepicker 和 Angular JS
- 谷歌可视化图表/仪表板无法完全绘制
- 在我的仪表板中,用户可以查看自己的分析
- 使用 PHP、JSON 和 google.visualization.DataTable 创建 google 仪表板图表
- 虚线仪表板链接小部件
- 仪表板中可编辑的图片和文本
- 带有 Angular Js 的管理仪表板