Question

我正在使用Google柱形图来显示数据。

问题：

不幸的是，通过一定的输入，柱条的高度不成比例。

错误再现：

I reconstructed this in a simple JsFiddle

Here is an other example, which contains a working and a not working version.

问题：

如何解决问题，以便高度与我的列的值差异成比例。

例如，如果一列的值为20.000而另一列的值为40.000，则第一列的高度应该是第二列的一半。

非常感谢你。

代码示例＆amp;图像：

这是我的jsFiddleCode：

HTML：

<body>
  <h1>
    Weird height of <a href="https://developers.google.com/chart/interactive/docs/gallery/columnchart">Google Column Chart</a> Bars.
  </h1>

  <div id="columnchart_values"></div>

    <h1>
    Correct height of <a href="https://developers.google.com/chart/interactive/docs/gallery/columnchart">Google Column Chart</a> Bars.
  </h1>

  <div id="columnchart_values2"></div>

</body>

的Javascript ：

function numberWithCommas(x) {
  var parts = x.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");

  if( typeof( parts[1] ) != 'undefined' ){
    parts[1] = parts[1].substr(0,2);
  }

  return parts.join(",");
}

function drawChart1() {

  var data = google.visualization.arrayToDataTable([
    ['Quelle', 'Geldbetrag', { role: 'style' }, { role: 'annotation' } ],
    ['test1', 40000, '#11368A', 'Cu' ],
    ['test2', 29400, '#000357', 'Ag' ],
    ['test3', 22193, '#40F020', 'Au' ],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation" },
                   2]);

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
}
function drawChart2() {
/*only the data of test 3 changed*/
  var data = google.visualization.arrayToDataTable([
    ['Quelle', 'Geldbetrag', { role: 'style' }, { role: 'annotation' } ],
    ['test1', 40000, '#11368A', 'Cu' ],
    ['test2', 29400, '#000357', 'Ag' ],
    ['test3', 19000, '#40F020', 'Au' ],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation" },
                   2]);

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values2"));
  chart.draw(view, options);
}
google.charts.load('current', {packages: ['corechart'], 'language': 'de'});
google.charts.setOnLoadCallback( function(){
    drawChart1();
  drawChart2();
} );

Answer 1

目前的行为是保持向后兼容多年前的方式。现在，如果它与数据“足够接近”，它将在图表中包含基线值。但是您可以通过简单地明确指定基线值来强制条形图的基线值包含在图表中。对于您的示例，只需添加：

vAxis: { baseline: 0 }

你的选择。见https://jsfiddle.net/2betxw5u/2/

Answer 2

添加：vAxis：{minValue：0，格式：＆＃39;€＃，###＆＃39;}选项可以解决问题。

Google柱形图：列高度与值不成比例

2 个答案: