Question

我已经成功制作了基于mysql值的谷歌条形图。现在我想把它做成叠加图表。

我已经看过很多例子，并且发现这个效果是使用图表参数如 chco，cht，chd 等以及图表api url生成的，即类似这样的事情：

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

我试图使用基本方法制作一个使用mysql的条形图，即从mysql获取数据并在json中编码并将其发送到图表脚本，如：

图表代码：

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var json = $.ajax({
            url: 'get_json_rank.php', // make this url point to the data file
            dataType: 'json',
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(json);
        var options = {
            legend: { position: 'none' },
            is3D: 'true',
            width: 500,
            height: 320,
            colors:['#4D515D'],
            hAxis: {
                textPosition:'none',
                title: "Restaurants"},
            vAxis: {
                title: "Business Growth",
                }
        };
        // Instantiate and draw our chart, passing in some options.
        //do not forget to check ur div ID
        var chart = new google.visualization.BarChart(document.getElementById('rank_chart'));
        chart.draw(data, options);

        setInterval(drawChart, 500 );
    }
</script>

我想在图表中添加以下参数，其中必须包含 php变量，因为它们代表栏中的男性和女性比例：

        cht='bhs',
        chco='4D89F9','C6D9FD'
        chd='t:'+ <?php echo $a; ?> +'|'+ <?php echo $b;?>,
        chds='0,160'

现在有人可以让我知道如何将这个简单的条形图变成堆叠。任何帮助都值得赞赏。

Answer 1

您可以使用选项获得堆积条形图：

isStacked: true

is3D: 'true'是用于饼图的选项。

选项chco, cht, chd...适用于不推荐使用的图片图表。请参阅google Image charts

使用谷歌图表api堆积条形图

1 个答案: