谷歌圖表：在線圖和柱形圖之間切換

我有一個儀表盤，裏面有一些Google Analytics（分析）指標。我希望按日，逐月和逐周繪製這些指標，周圖。折線圖中的每日圖表，但其他圖表是柱形圖。谷歌圖表：在線圖和柱形圖之間切換

我能夠讓圖表最初繪製爲線條或條形圖，然後將其作爲不同類型重繪，但在此之後將不會重繪！

這是一個基本的，簡單的例子，我已經建立了說明我的情況：

<!DOCTYPE html>

<head> 
    <title>Test</title> 

    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(initialize); 

     function initialize() { 

      var chart = new google.visualization.ColumnChart(document.getElementById('chart-div')); 
      var line = new google.visualization.LineChart(document.getElementById('chart-div')); 
      var data = []; 
      data[0] = new google.visualization.DataTable(); 

      data[0].addColumn('string', 'x'); 
      data[0].addColumn('number', 'A'); 
      data[0].addColumn('number', 'B'); 
      data[0].addRow(['A', 123, 40]); 
      data[0].addRow(['B', 17, 20]); 

      data[1] = new google.visualization.DataTable(); 

      data[1].addColumn('string', 'x'); 
      data[1].addColumn('number', 'C'); 
      data[1].addColumn('number', 'D'); 
      data[1].addRow(['C', 222, 13]); 
      data[1].addRow(['D', 542, 80]); 

      var options = { 
       width: 400, 
       height: 240, 
       vAxis: {minValue:0, maxValue:1000}, 
       animation: { 
        duration: 1000, 
        easing: 'out' 
       } 
      }; 

      var barsButton = document.getElementById('b1'); 
      var lineButton = document.getElementById('b2'); 

      function drawChart() { 
       chart.draw(data[0], options); 
      } 

      function drawLine() { 
       line.draw(data[1], options); 
      } 

      barsButton.onclick = function() { 
       drawBars(); 
      } 

      lineButton.onclick = function() { 
       drawLine(); 
      } 

      drawChart(); 
     } 
    </script> 
</head> 

<body> 
    <input type = 'button' id = 'b1' value = 'Draw Column Chart' /> 
    <input type = 'button' id = 'b2' value = 'Draw Line Chart' /> 
    <div id="chart-div"></div> 
</body>

來源

2014-01-16 fatslug

您應該使用ChartWrapper object

這樣你只需要一個製圖對象

var chart = new google.visualization.ChartWrapper({ 
    containerId: 'chart-div' 
});

，然後你可以用.setChartType方法改變其類型

var barsButton = document.getElementById('b1'); 
var lineButton = document.getElementById('b2'); 

chart.setOptions(options); 

function drawBars() { 
    chart.setChartType('ColumnChart'); 
    chart.setDataTable(data[0]); 
    chart.draw(); 
} 

function drawLine() { 
    chart.setChartType('LineChart'); 
    chart.setDataTable(data[1]); 
    chart.draw(); 
} 

barsButton.onclick = function() { 
    drawBars(); 
} 

lineButton.onclick = function() { 
    drawLine(); 
} 
drawBars();

演示在http://jsfiddle.net/gaby/Xmj6j/

來源

2014-01-16 19:26:15

谷歌圖表：在線圖和柱形圖之間切換

回答

相關問題