Google Charts指定配置选项不生效问题求助

使用Google Charts API绘制条形图时，图表能正常显示，但legend: 'none'和colors: ['#e0440e', '#e6693e']这两个配置完全不起作用。相关代码如下：

function show_workpack_chart ($project, $con) {        
    // Get the data (works ok but removed here)
    $dataset = "['Workpack Budget vs Actual Hours', 'Budget Hours', 'Hours Spent']";
    $values = "";
        while ($row = mysqli_fetch_assoc($result)) {
        $values .= "['" . $row["name"] . "', " . $row["manhours"] . ", " . $row["hoursspent"] . ",],";
        
        }    
    
    // Load the charts library
    echo '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
    echo "<script type=\"text/javascript\">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          " . $dataset . ", " . $values . "
        ]);

        var options = {
          chart: {
            title: 'Workpack Overview',
            subtitle: 'Hours spent per workpack',
            legend: 'none',
            colors: ['#e0440e', '#e6693e']
            
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_hours'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>";
    
    // Now draw the chart
    echo '<div id="columnchart_hours" style="width: 100%; height: 350px;"></div>';
}

解决思路及修正方案 #

核心问题 #

你使用的是Material Design风格的google.charts.Bar，这类图表的配置规则和经典版本不同：legend和colors属于全局配置项，不能嵌套在chart对象内部，必须放在options的顶层才能被正确识别。

修正后的配置代码 #

修改options结构，将legend和colors移到顶层：

var options = {
  chart: {
    title: 'Workpack Overview',
    subtitle: 'Hours spent per workpack'
  },
  legend: 'none',
  colors: ['#e0440e', '#e6693e']
};

额外优化点 #

循环生成$values时，最后会多一个多余的逗号，可能引发JS语法错误，建议在循环结束后去除：

$values = rtrim($values, ',');

内容的提问来源于stack exchange，提问作者TomC