【发布时间】:2018-11-20 19:40:49
【问题描述】:
我正在尝试使用 Google Charts 中的 ChartEditor 和 ChartWrapper 类并使用我自己的选项运行它。它主要工作,只有一个问题 - 它忽略了我的宽度和高度声明...... 有谁知道为什么它忽略了我的高度和宽度(而不是高度:600 和宽度:900 它需要高度:371 和宽度:600)?
这里的JSFiddle:https://jsfiddle.net/mt085nec/
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
console.log(JSON.stringify(chartEditor.getChartWrapper().getChartType()));
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
}
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
}
function getDataView(dataTable) {
var dataView;
var viewColumns = [];
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}
【问题讨论】:
标签: javascript google-visualization googlevis