个人中心
gpt4 book ai didi

javascript - 谷歌柱形图: Column height not in proportion to the value

转载 作者：行者123 更新时间：2023-12-03 03:32:22 25 4
gpt4 key购买 nike

我正在使用 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，则第一列的高度应为第二列的一半。

非常感谢。

<小时/>

代码示例和图像:

这是我的 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();
} );

enter image description here

最佳答案

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

vAxis: { 基线: 0 }

您的选择。请参阅https://jsfiddle.net/2betxw5u/2/

关于javascript - 谷歌柱形图: Column height not in proportion to the value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46034322/

25 4 0
文章推荐： javascript - Angularjs - 将服务代码移动到另一个文件
文章推荐： javascript - iOS Safari : 'click' event not triggerd when there is an event-listener on 'mousemove'
文章推荐： javascript - 如何在 d3.js 中移动圆圈(数据点)
文章推荐： JavaScript访问本地json
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com