0

我正在使用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(); 
}); 

enter image description here

回答

0

添加:vAxis:{minValue(最小值):0,格式为: '€####'}的选项解决问题。

1

当前的行为是保持向后兼容多年前的方式。现在,如果它与数据“足够接近”,它将包含图表中的基准值。但是您可以通过显式指定基准值来强制将条的基线值包含在图表中。对于你的榜样,只需添加:

vAxis: { baseline: 0 }

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