Google 图表 ChartEditor 或 ChartWrapper 忽略高度和宽度选项

Question

我正在尝试使用 Google 图表中的 ChartEditor 和 ChartWrapper class 以及运行它和我自己的选项。它大部分都有效，只有一个问题 - 它忽略了我的宽度和高度声明...... 有人知道为什么它会忽略我的高度和宽度（而不是高度：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;
}

Answer 1

当更新图表编辑器中的图表包装时，大小选项正在更改，这里...

console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));

这是为了让图表适合编辑器。

要更正尺寸问题，
删除上面的行，并绘制新的包装器，而不是编辑器包装器。

wrapperTemp.draw(document.getElementById('columnchart_values'));

而不是...

chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));

请参阅以下工作片段...

google.charts.load("current", {packages:['charteditor', 'corechart']});

google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];

var optionsBar = {
 annotations: {
  alwaysOutside: true,
  textStyle: {
   fontSize: 10
  }
 },
 height: 600,
 width: 900,
 isStacked: true,
 colors: colors,
 chartArea: {
  left: "25%",
  top: "10%"
 },
 hAxis: {
  gridlines: {
   color: 'transparent'
  },
  textPosition: "none",
  viewWindow: {
   max: maxValCol + (maxValCol *0.2),
   min: 0
  }
 },
 legend: {
  position: 'top',
  alignment: "center",
  maxLines: 4
 },
 bar: {
  groupWidth: '70%'
 }
};

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
 });

 if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
  wrapperTemp.setChartType('BarChart');
  wrapperTemp.setOptions(optionsBar);
  chartEditor.getChartWrapper().setChartType("BarChart");
 } else {
  wrapperTemp.setChartType('ColumnChart');
  wrapperTemp.setOptions(optionsColumn);
 }
 wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
 data = new google.visualization.DataTable({
  cols:[
   {id:"","label":"Products","pattern":"","type":"string"},
   {id:"","label":"Water","pattern":"","type":"number"},
   {id:"","label":"Cola","pattern":"","type":"number"},
   {id:"","label":"Fanta","pattern":"","type":"number"},
   {id:"","label":"Tonic Water","pattern":"","type":"number"}],

  rows:[
   {c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
   {c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
   {c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
   {c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
   {c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
   {c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
   {c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
   {c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
   {c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
   {c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
   {c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
 });
 formatter = new google.visualization.NumberFormat({
  pattern: 'short'
 });

 for (var i = 1; i < data.getNumberOfColumns(); i++) {
  formatter.format(data, i);
 }

 view = getDataView(data);
 maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}

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;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

Google 图表 ChartEditor 或 ChartWrapper 忽略高度和宽度选项

Google Charts ChartEditor or ChartWrapper ignoring height and width option

javascript

google-visualization

googlevis