Google 차트 : 선 그래프와 기둥 차트 간 전환

일부 Google 애널리틱스 측정 항목이있는 대시 보드가 있습니다.이 측정 항목을 일별, 월별 및 월별로 차트로 표시하고 싶습니다. 주간 차트. 선형 차트의 일별 차트이지만 다른 차트는 기둥 형 차트입니다.Google 차트 : 선 그래프와 기둥 차트 간 전환

차트를 처음에 선 또는 막 대형 차트로 그리면 다른 유형으로 다시 그릴 수 있지만 그 후에는 다시 그리지 않습니다!

<!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

이 방법을 사용해야합니다

이것은 내 상황을 설명하기 위해 설정 한 기본, 단순화 된 예입니다 당신은 단 하나의 차트 객체가 필요합니다

http://jsfiddle.net/gaby/Xmj6j/

에서

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();

데모

출처

2014-01-16 19:26:15

Google 차트 : 선 그래프와 기둥 차트 간 전환

답변

관련 문제