Google Charts:在线图和柱形图之间切换

Question

Google Charts:在线图和柱形图之间切换

fat*_*lug 3 javascript linechart google-visualization bar-chart

我有一个仪表板,其中包含一些Google Analytics指标.我想在每日,每月,每周和每周图表中绘制这些指标.折线图中的逐日图表,但其他图表是柱形图.

我能够将图表最初绘制为线条或条形图,然后将其重绘为不同的类型,但之后它将不再重绘!

这是我设置的基本简化示例,用于解释我的情况:

<!DOCTYPE html>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gab*_*oli 6

你应该使用这个ChartWrapper对象

这样您只需要一个图表对象

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

Run Code Online (Sandbox Code Playgroud)

然后你可以用这个.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();

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，12 月前
查看次数：	3843 次
最近记录：	11 年，12 月前