Google三維y軸折線圖

我想創建一個Google折線圖，在一張圖表中顯示溫度，溼度和氣壓。Google三維y軸折線圖

因此，應該有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/

來源

2017-04-09 yglodt

你有正確的想法...

你可能會考慮將給予右側多一點空間進行操作唯一的其他東西，
例如

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>

來源

2017-04-10 11:54:15 WhiteHat

我能欺騙通過移動它們（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/

來源

2017-04-09 21:11:28 yglodt

Google三維y軸折線圖

回答

相關問題