Question

我想创建一个Google折线图，在一个图表中显示温度，湿度和气压。

因此应该有3个不同范围的y轴。

问题是第二和第三个y轴在某种程度上重叠。

到目前为止，我只看过两个y轴的例子。三轴y轴是否可行？如果我选择与经典变体相对的材料会有帮助吗？

我的图表设置在这里：

new google.visualization.LineChart(document.getElementById('visualization'))
        .draw(data, {
            vAxes : [ {
                title : 'Title 1',
                minValue : 0,
                maxValue : 20
            }, {
                title : 'Title 2',
                minValue : 40,
                maxValue : 80
            }, {
                title : 'Title 3',
                minValue : 950,
                maxValue : 1050
            } ],
            series : {
                0 : {
                    targetAxisIndex : 0
                },
                1 : {
                    targetAxisIndex : 1
                },
                2 : {
                    targetAxisIndex : 2
                }
            },
        });

小提琴在这里：

https://jsfiddle.net/1b3hd0ya/2/

Answer 1

我可以通过移动（textPosition）其中一个in而另一个out来欺骗可见轴：

vAxes : {
    0 : {
        title : '°C',
        textPosition : "out",
        minValue : -10,
        maxValue : 25
    },
    1 : {
        title : '% rel',
        textPosition : "in",
        minValue : 20,
        maxValue : 90
    },
    2 : {
        title : 'hPa',
        textPosition : "out",
        minValue : 900,
        maxValue : 1100
    }
}

更新了小提琴：https://jsfiddle.net/1b3hd0ya/3/

Answer 2

你有正确的想法......

只有你能考虑的其他事情才能让右侧有更多的工作空间，
例如

chartArea.right

材料图表可以更好地间隔多个轴标签，
但有far fewer options to work with ...

请参阅以下工作代码段，它会同时绘制...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['line', 'corechart']
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'Temperature', 'Humidity', 'Pressure'],
    ['A',   5,     55,     1000],
    ['B',   12,     57,     1001],
    ['C',   14,     57,     1001],
    ['D',   18,     58,     1010],
    ['E',   17,     58,     1010],
    ['F',   17,     60,     1012],
    ['G',   18,     61,     1013],
    ['H',   22,     62,     1010],
    ['I',   24,     62,     1012],
    ['J',   20,     62,     1005],
    ['K',   17,     60,     1005],
    ['L',   17,     58,     1004],
    ['M',   16,     58,     1005],
    ['N',   15,     57,     1003]
  ]);

  // classic
  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
      chartArea: {
        right: 136
      },
      curveType : 'function',
      lineWidth : 2,
      pointSize : 2,
      vAxes: {
        0: {title: '°C', textPosition: 'out', minValue: -10, maxValue: 25 },
        1: {title: '% rel', textPosition: 'in', minValue: 20, maxValue: 90 },
        2: {title: 'hPa', textPosition: 'out', minValue: 900, maxValue: 1100 }
      },
      series:{
        0: {targetAxisIndex:0, color : 'blue'},
        1: {targetAxisIndex:1, color : 'red'},
        2: {targetAxisIndex:2, color : 'green'}
      }
    }
  );

  // material
  new google.charts.Line(document.getElementById('visualization_matl')).
    draw(data, {
      series: {
        0: {axis: 'Temperature'},
        1: {axis: 'Humidity'},
        2: {axis: 'Pressure'}
      },
      axes: {
        y: {
          Temperature: {label: '°C'},
          Humidity: {label: '% rel'},
          Pressure: {label: 'hPa'}
        }
      }
    }
  );
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>
<div id="visualization_matl"></div>

具有三重y轴的Google折线图

2 个答案: