3

我有一个谷歌组合图表，我在其中使用两个 y 轴。

目前，每个轴的基线处于不同的水平。

我希望确保每个轴的基线处于同一水平。

我目前用来显示我的图表的代码如下所示：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

    var data = new google.visualization.DataTable();

        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Total PnL');
        data.addColumn('number', 'Total Margin');

        data.addRows([  [6.5,150.6,0.6604],
                        [7.0,-275,-1],
                        [7.5,-128.45000,-0.30368],
                        [8.0,345.5,0.63904761],
                        [8.5,-316.56000,-0.07868],
                        [9.0,-118.26000,-0.09587],
                        [9.5,-899.0699,-0.236790],
                        [10.0,-242.6800,-0.40805],
                        [10.5,28.1700,0.00786]  ]);                    

        var options = {
            title: 'Graph 1',
            tooltip: {textStyle: {fontSize:14}},
            titleTextStyle:{fontSize:12},
            hAxis: {title: 'time', titleTextStyle: {color: 'red',fontSize:15}, textStyle: {fontSize:11,fontStyle:'bold'}},
            legend: {maxLines:5,textStyle: {fontSize: 11.5}},
            seriesType: "bars",
            series: {
                    0: {type: "bar",targetAxisIndex:0,color:'#000000'},
                    1: {type: "line",targetAxisIndex:1,color:'#333333'},
                    }, 
            vAxes:{
                0:{title:'PnL',titleTextStyle: {fontSize:14},textStyle:{color: 'blue',fontSize:15},format:'£###,###,###'},
                1:{title:'Margin',titleTextStyle: {fontSize:14},textStyle:{color: 'red',fontSize:15},format:'#.###%'}
                }
        };      

      var chart = new google.visualization.ComboChart(document.getElementById('graphdiv'));
      chart.draw(data, options);
    }

    </script>
</head>
<body>
    <div id='graphdiv' style='width: 900px; height: 500px;'></div>
</body>
</html>

我知道与此问题相关的有关 stackoverflow 的以下两个问题：

  1. 具有双 y 轴 Google 图表的多个基线
  2. 谷歌可视化将 0 轴与两个不同的 y 轴对齐

在我看来，其中第一个专门处理预先知道数据的情况。查看实现它所需的 javascript 的一些指示也很有用。

第二个提供了一些有用的 javascript，但它似乎无法处理第二个系列包含负值的数据系列，就像我的数据集一样。

我知道这两个答案中最重要的组成部分是利用每个 vAxes 的 minValue 和 maxValue 属性。更改这些可用于覆盖 Google Charts 通常决定每个轴的基线的方式（通常它通过纯粹查看每个轴的数据本身的最小值和最大值来做到这一点）。

4

1 回答 1

2

我在 google 可视化 api 讨论组上找到了上述问题的答案，由 @asgallant 提供。见这里。

我已经复制了下面的答案：

如果基线总是在图表的中心是可以接受的（即使它下面没有数据点），这个问题有一个简单的解决方案：获取每个系列的最小值/最大值并设置 minValue/maxValue 选项到相反值的负值：这将确保图表用于确定轴范围的实际最小/最大值围绕 0 对称，因此两个轴应共享图表中心的基线。

var axis0Range = data.getColumnRange(1);

var axis1Range = data.getColumnRange(2);

在 vAxes 选项中：

vAxes:{

0:{
    title:'PnL',
    titleTextStyle: {fontSize:14},
    textStyle:{color: 'blue',fontSize:15},
    format:'£###,###,###',
    // swap the min/max and multiply by -1
    minValue: axis0Range.max * -1,
    maxValue: axis0Range.min * -1
},
1:{
    title:'Margin',
    titleTextStyle: {fontSize:14},
    textStyle:{color: 'red',fontSize:15},
    format:'#.###%',
    // swap the min/max and multiply by -1
    minValue: axis1Range.max * -1,
    maxValue: axis1Range.min * -1
 }
}
于 2015-02-12T20:42:18.950 回答