Google 可视化多个图表 - 选项不起作用

问题描述

我有一个多图表 Google 可视化脚本（1 个柱状图和 2 个折线图）。除 var Options 代码外，图表均正常工作/显示。选项部分最重要的部分是能够更改列/线条颜色。所以我尝试使用 role: 'style'} 替代方法更改它，但它也不起作用。

请参阅以下 3 个图表的代码。我是 Google Visualization 的新手，非常感谢您提供任何反馈/帮助！

google.charts.load('current',{
  packages: ['corechart','controls']
}).then(function () {
          
  // Chart data
  var data = [];
  data[0] = google.visualization.arrayToDataTable ([["Date","Sessions",{role: 'style'}],<?PHP
                                    for($a = 0; $a < 7; $a++)
                                    {
                                        echo "['".$date[$a]."',".$sessions[$a].",'fill-color: #76A7FA'],";
                                    }
                                ?>
                                                    ]);
  data[1] = google.visualization.arrayToDataTable ([["Date","Sessions"],<?PHP
                                    for($a = 0; $a < 31; $a++)
                                    {
                                        echo "['".$date[$a]."',".$sessions[$a]."],";
                                    }
                                ?>
                                                    ]);
  data[2] = google.visualization.arrayToDataTable ([["Date",<?PHP
                                    for($a = 0; $a < count($query); $a++)
                                    {
                                        echo "['".$date[$a]."',";
                                    }
                                ?>
                                                    ]);
    
  var current = 0;
  var current_chart = 0;

  // Create and draw the visualization
  var chart = [];
  chart[0] = new google.visualization.ColumnChart(document.getElementById('sessions_chart'));

  chart[1] = new google.visualization.LineChart(document.getElementById('sessions_chart'));
  
  function drawChart() {
    // disabling the buttons while the chart is drawing.
    document.getElementById('week_btn').disabled = true;
    document.getElementById('month_btn').disabled = true;
    document.getElementById('all_btn').disabled = true;
    google.visualization.events.addListener(chart,'ready',function() {
    // Enable the buttons after the chart has been drawn
    document.getElementById('week_btn').disabled = false;
    document.getElementById('month_btn').disabled = false;
    document.getElementById('all_btn').disabled = false;
    });
    
    var view = new google.visualization.DataView(data[current]);    
  
    var options = {
                    title: 'Number of Sessions',vAxis: {title: "# of Sessions",minValue:0},hAxis: {format: 'MMM d,y'},colors: 'lightgreen'
                };  

    // Convert first column to date format
    view.setColumns([{
        calc: function (dt,row) {
            return new Date(dt.getValue(row,0));
        },label: data[current].getColumnLabel(0),type: 'date'
    },1]);  
      
    chart[current_chart].draw(view,data[current],options);
  }
  drawChart();
    // google.charts.setonLoadCallback(drawChart);

document.getElementById('week_btn').addEventListener("click",displayWeek);
function displayWeek() {
  current = 0;
  current_chart = 0;
  drawChart();
}  
document.getElementById('month_btn').addEventListener("click",displayMonth);
function displayMonth() {
  current = 1;
  current_chart = 1;
  drawChart();
}  
document.getElementById('all_btn').addEventListener("click",displayAll);
function displayAll() {
  current = 2;
  current_chart = 1;
  drawChart();
}  
});

解决方法

颜色选项应该是一个数组...

colors: ['lightgreen']

至于风格角色，尽量只提供颜色...

echo "['".$date[$a]."',".$sessions[$a].",'#76A7FA'],";

和

强烈建议不要在 php 中从字符串手动构建 json。

相反，在两个不同的文件中将 php 与 html 分开。
在php中构建数据并将编码后的json返回给页面。
然后使用ajax调用php页面，获取编码后的json。
然后绘制图表。

这里有一些例子...
How to automatically update Google Gauge
JSON $ajax problems