我正在使用Google柱形图来显示数据。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();
});