Question

我一直在努力使用谷歌图表API。我在SO PHP MySQL Google Chart JSON - Complete Example上找到了这个精彩的例子。

但是我想知道如何更改dafault蓝色的条形颜色。我对如何使用{ role: 'style' }函数感到困惑。

这是我的代码：

     <?php
    $con=mysql_connect("localhost","username","pass") or die("Failed to connect with database");
    mysql_select_db("rosac", $con); 
    $query = mysql_query("
    SELECT TarikhLulusTahun AS Tahun, COUNT(*) AS Jumlah 
FROM association 
GROUP BY TarikhLulusTahun");


    $rows = array();
    $table = array();
    $table['cols'] = array(

        array('label' => 'Tahun', 'type' => 'string'),
        array('label' => 'Jumlah Persatuan', 'type' => 'number')
        ({type: 'string', role: 'style'})

    );

    $rows = array();
    while($r = mysql_fetch_assoc($query)) {
        $temp = array();
        $temp[] = array('v' => (string) $r['Tahun']); 

        $temp[] = array('v' => (int) $r['Jumlah']); 
        $rows[] = array('c' => $temp);
    }

    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
    //echo $jsonTable;
    ?>

    <html>
      <head>
        <!--Load the Ajax API-->
        <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() {

          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(<?=$jsonTable?>);
          var options = {
               title: 'Jumlah Persatuan Berdaftar Mengikut Tahun',
              is3D: 'true',
              width: 1000,
              height: 1000,
             hAxis: {title: 'Tahun', titleTextStyle: {color: 'red'}},
             vAxis: {title: 'Jumlah Persatuan', titleTextStyle: {color: 'blue'}}
            };

          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
        </script>
      </head>

      <body>
        <!--this is the div that will hold the pie chart-->
        <div id="chart_div"></div>
      </body>
    </html>

Answer 1

你需要做几件事。首先，您的列创建是错误的;这样：

$table['cols'] = array(
    array('label' => 'Tahun', 'type' => 'string'),
    array('label' => 'Jumlah Persatuan', 'type' => 'number')
    ({type: 'string', role: 'style'})
);

应该是这样的：

$table['cols'] = array(
    array('label' => 'Tahun', 'type' => 'string'),
    array('label' => 'Jumlah Persatuan', 'type' => 'number'),
    array('type' => 'string', 'p' => array('role' => 'style'))
);

然后，在创建数据行时，需要为样式添加单元格：

while($r = mysql_fetch_assoc($query)) {
    $temp = array();
    $temp[] = array('v' => (string) $r['Tahun']); 
    $temp[] = array('v' => (int) $r['Jumlah']); 
    $temp[] = array('v' => <insert style here>); 
    $rows[] = array('c' => $temp);
}

Answer 2

    $table = array();
    $table['cols'] = array(
        array('id' => "", 'label' => 'Category', 'pattern' => "", 'type' => 'string'),
        array('id' => "", 'label' => 'Budgeted', 'pattern' => "", 'type' => 'number'),
        array('type' => 'string', 'p' => array('role' => 'style'))
    );

    $rows = array();
    while($r = mysql_fetch_assoc($result_chart)) {

        $temp = array();
        $temp[] = array('v' => (string) $r['Groups']); 
        $temp[] = array('v' => (int) $r['Amount']); 
        $temp[] = array('v' => 'color: #0000cf; stroke-color: #cf001d');
            $rows[] = array('c' => $temp);
    }

    $table['rows'] = $rows;
    $jsonTable = json_encode($table);

关闭PHP部分，然后

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load('visualization', '1', {'packages':['corechart']});

    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

        var options = {
        width: 980,
        height: 500,
        backgroundColor: '#F6F6F6'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    }       
    </script>

Answer 3

隐私设计

其他两个答案都是有用的（两个都支持）。不过，出于说明目的，我将帽子戴在戒指上。下面，我使用客户端AJAX通过服务器上的静态JSON消耗数据来模拟一个更安全的应用程序。这样做的好处是不公开数据库结构或凭据（假设RESTful服务器与运行最终页面的服务器是分开的）。

我展示了2个替代方案（略有不同的声明），它们都适用于简单的条形颜色（color和color2）。在您的最终代码中，使用最适合您的一个。

服务器端RESTful php

$graphData = array(
    'colors' => array(
    'cols' => array(
        array('type' => 'string', 'label' => 'Tahun'),
        array('type' => 'number', 'label' => 'Jumlah'),
        array('type' => 'string', 'p' => array('role' => 'style'))
    ),  
    'rows' => array()
    ),
    'colors2' => array(
    'cols' => array(
        array('type' => 'string', 'label' => 'Tahun'),
        array('type' => 'number', 'label' => 'Jumlah'),
        array('type' => 'string', 'role' => 'style')
    ),
    'rows' => array()
    )
);
[...]
$sql="SELECT  `Tahun`, `Jumlah`, `Color` FROM [...] ";
$result = mysqli_query($conn, $sql) or trigger_error(mysqli_error($conn));
while($row = mysqli_fetch_array($result)){
    $graphData['colors']['rows'][] = array('c' => array(
        array('v' => $row['Tahun']),
        array('v' => (int)$row['Jumlah']),
        array('v' => $row['Color'])
    ));
    $graphData['colors2']['rows'][] = array('c' => array(
        array('v' => $row['Tahun']),
        array('v' => (int)$row['Jumlah']),
        array('v' => $row['Color'])
    ));
}
// $row['Color'] is formatted as "color: #FF0000"
echo json_encode($graphData);

客户端浏览器JavaScript

var jsonDataAjax = $.ajax({
    url: "http://yourdomain.com/yourRestfulJson.php",
    dataType: "json",
    async: false
    }).responseText;
var jsonData = eval("(" + jsonDataAjax + ")");

var jsonColors = new google.visualization.DataTable(jsonData.colors);
var jsonColors2 = new google.visualization.DataTable(jsonData.colors2);

var viewColors = new google.visualization.DataView(jsonColors);
viewColors.setColumns([0, 1,
           { calc: "stringify",
             sourceColumn: 1,
             type: "string",
             role: "annotation" },
           2]);   
                    
var viewColors2 = new google.visualization.DataView(jsonColors2);
viewColors2.setColumns([0, 1,
           { calc: "stringify",
             sourceColumn: 1,
             type: "string",
             role: "annotation" },
           2, {type: 'string', role: 'style'}]);        

var options = {
    title: "ColumnChart Color Testing Graph",
    width: 1200,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
};

var chart1 = new google.visualization.ColumnChart(document.getElementById('bar1_div'));
var chart2 = new google.visualization.ColumnChart(document.getElementById('bar2_div'));

chart1.draw(viewColors, options);
chart2.draw(viewColors2, options);

当数据表输入来自服务器的JSON数据时，更改Google Chart栏颜色

3 个答案: