javascript – Google Charts：在线图和柱形图之间切换

2019-08-25 08:34:01 阅读：275 来源： 互联网

标签：linechart javascript google-visualization bar-chart

我有一个仪表板,其中包含一些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>

解决方法:

你应该使用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/

标签：linechart,javascript,google-visualization,bar-chart
来源： https://codeday.me/bug/20190825/1717391.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Google Charts：在线图和柱形图之间切换