2013-05-20 88 views
4

我被分配创建一个谷歌图表,其中,我必须实现一个两条y轴折线图。虽然,谷歌只为单个y轴图表教程。我如何使用谷歌图表实现一个两个y轴的折线图。我正在使用ajax响应来获取相关数据!如果任何人可以帮助我一个很好的教程或示例代码,那将是非常感谢。如何在谷歌图表中绘制两条y轴折线图

我已经创建了一个示例图,以了解我正在尝试做什么。

enter image description here

谢谢。

回答

6
function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Data 1', 'Data 2', 'Data 3'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {vAxes:[ 
     {title: 'Title 1', titleTextStyle: {color: '#FF0000'}, maxValue: 10}, // Left axis 
     {title: 'Title 2', titleTextStyle: {color: '#FF0000'}, maxValue: 20} // Right axis 
    ],series:[ 
       {targetAxisIndex:1}, 
       {targetAxisIndex:0} 
    ],}); 

}​ 
+0

你的例子实际上并不工作https://jsfiddle.net/gvxz73n7/ – vladkras