个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 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();
} );
最佳答案
当前的行为是与多年前的方式保持向后兼容。现在，如果基线值与数据“足够接近”，它将在图表中包含基线值。但是，您可以通过简单地明确指定基线值来强制将条形的基线值包含在图表中。对于您的示例，只需添加:
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
我想 reshape pandas 数据框， 我有这种格式的 csv 文件 #Result;ID;Date;Events;type 12;1240422;10/01/2017 10:10;1;Item
我有一个现有的 Highcharts ，我需要在其上突出显示单个列。 这是一个已经存在了一段时间的百分位图，我对 Highcharts 仍然很陌生，但我在这里看到了一个类似的问题，这个问题虽然涉及堆叠
我有一个多系列柱形图(在本例中为 3 个)。我想在所有系列的列上覆盖一条线。所以我用相同的列系列数据创建了另外 3 个 Line 系列。当只有一列和一行系列时，这非常有效。对于多个系列，线条呈现在类别
我是一名优秀的程序员,十分优秀！