谷歌图表：在线图和柱形图之间切换

我有一个仪表盘，里面有一些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

谷歌图表：在线图和柱形图之间切换

回答

相关问题