logo标签列表

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

javascriptgoogle-visualizationbar-chartlinechart
3
我有一个仪表板，其中包含一些从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>

1个回答
6
你应该使用ChartWrapper对象。这样你只需要一个绘图对象。
 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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接