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

Posted 2023-02-24

技术标签:

【中文标题】当数据表输入来自服务器的 JSON 数据时更改 Google 图表栏颜色【英文标题】：Change Google Chart bar colors when data table input is from JSON data from server 【发布时间】：2014-02-02 19:27:22 【问题描述】：

我一直在努力使用谷歌图表 API。我在 SO php mysql Google Chart JSON - Complete Example 上找到了这个绝妙的例子。

但是我想知道如何将条形颜色从默认蓝色更改。我对如何使用 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>

【问题讨论】：

【参考方案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);

【讨论】：

我可以直接添加样式，还是需要像 Tahun 和 Jumlah 行一样将值 'v' 传递给 $r？如果你想单独着色条，你必须使用'v' => value 语法。如果您只是想更改整个数据系列的颜色，可以使用图表中的 colors 选项完成 - 您无需使用 style 角色来完成此操作。哦，不，你不需要有$r中的样式——它可以直接输入，也可以从另一个PHP变量输入，没关系。【参考方案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>

【讨论】：

【参考方案3】：

隐私设计

其他两个答案都很有用（都赞成）。尽管如此，为了说明的目的，我还是会把我的帽子扔进戒指中。下面我模拟了一个更安全的应用程序，使用客户端 AJAX 在服务器上使用来自 restful 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 图表栏颜色的主要内容，如果未能解决你的问题，请参考以下文章

解析来自 JSON 服务器的数据时，Android ListView 不显示

用户更改类别时自动填充表单时使用 JSON

当用户输入新数据时动态制作 .Json 文件（服务器端 Parse.com）

比较两个 JSON 并显示我们更改了哪一列的活动？

数据更改时如何刷新氧图

使用本机数据类型将表单输入自动编码为 JSON