[英]Chart Formatting in ChartWrapper in Google Charts
我正在使用Google Charts的Dashboard部分创建各种图表。
为了制作图表,我使用了约定:
var chartName = new google.visualization.ChartWrapper({
// lots of options here
});
但是,当我在ChartWrapper对象中输入某些自定义详细信息时,这些细节没有被调用。
特别是趋势线,将条形图上的条形更改为Horizonta,然后将条形堆叠。
还有其他一些,但是这些足以满足这个问题,因为它们都包含在我要解决的单个图表中。
我认为所有这些都缺少一个共同的元素,这就是为什么我认为最好将它们全部包含在一个问题中。 关于ChartWrapper语法,必须有一些我不正确的细节。
对于上述所有项目,我首先将其放置在“选项”对象中,然后将其作为自己的键直接放在ChartWrapper()中,而无需任何其他嵌套。
要了解更多细节:
码:
这是一些不起作用的示例代码:
var childrenHelpedChart = new google.visualization.ChartWrapper({
'chartType' : 'Bar',
'containerId' : 'chart_div2',
'view' : {
'columns' : [0, 2, 3]
},
'options' : {
'height' : 400,
'trendlines' : {0 : {}},
'isStacked' : 'percent',
'bar' : 'horizontal'
},
});
我使用的图表响应“高度”变量,但是“趋势线”,“ isStacked”和“条形图”全都置若de闻。
但是,如果我将它们放在“选项”对象之外,它们也不会显示在图表中。
例如,以下代码也无效。
CODE2:
var childrenHelpedChart = new google.visualization.ChartWrapper({
'chartType' : 'Bar',
'containerId' : 'chart_div2',
'view' : {
'columns' : [0, 2, 3]
},
'options' : {
'height' : 400
},
'trendlines' : {
0 : {}
},
'bar' : 'horizontal',
isStacked : 'percent'
});
如果有帮助,这里是我用来生成图表的整个脚本:
脚本:
google.charts.setOnLoadCallback(initialize);
function initialize() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=1104676809');
query.send(drawDashboard)
}
function drawDashboard(response) {
var data = response.getDataTable();
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var storytimeDateFilter2 = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'date_filter_div2',
'options' : {
'filterColumnIndex' : 0
}
});
var childrenHelpedChart = new google.visualization.ChartWrapper({
'chartType' : 'Bar',
'containerId' : 'chart_div2',
'view' : {
'columns' : [0, 2, 3]
},
'options' : {
'height' : 400
},
'trendlines' : {
0 : {}
},
'bar' : 'horizontal',
'isStacked' : 'percent'
});
dashboard.bind(storytimeDateFilter2, childrenHelpedChart);
dashboard.draw(data);
}
您使用的图表是材料图表
有几个选项根本不适用于材料图表
您可以在此处找到列表-> 物料图特征奇偶校验的跟踪问题#2143
要更正,您可以使用Core图表版本,
带有-> theme: 'material'
的附加选项theme: 'material'
材料 = 'Bar'
var childrenHelpedChart = new google.visualization.ChartWrapper({
'chartType' : 'Bar', // <- Material version
'containerId' : 'chart_div2',
'view' : {
'columns' : [0, 2, 3]
},
'options' : {
'height' : 400,
'trendlines' : {0 : {}},
'isStacked' : 'percent',
'bar' : 'horizontal'
},
});
核心 = 'BarChart'
(水平)-或'ColumnChart'
(垂直)
var childrenHelpedChart = new google.visualization.ChartWrapper({
'chartType' : 'BarChart', // <-- Core version
'containerId' : 'chart_div2',
'view' : {
'columns' : [0, 2, 3]
},
'options' : {
'height' : 400,
'trendlines' : {0 : {}},
'isStacked' : 'percent',
'theme' : 'material' // <- Material theme
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.