根据mysql值改变谷歌饼图切片的颜色答案

【问题标题】：change the colour of google pie chart slice based on mysql value根据mysql值改变谷歌饼图切片的颜色
【发布时间】：2019-04-30 14:23:12
【问题描述】：

我目前在一个页面上有 2 个使用 MYSQL 填充的图表，其中 1 个是条形图，另一个是饼图

我已经成功地根据 mysql 更改了条形的颜色，但似乎无法使用相同的代码来更改饼图的颜色，我得到的结果是整个图表变成了最大切片的颜色，例如对于整个图表下方表格中的数据，将变为红色作为其最大的切片

数据串如下：

|---------------------|------------------|
|      location       |      beacon      |
|---------------------|------------------|
|         RED         |         34       |
|---------------------|------------------|
|         Blue        |         34       |
|---------------------|------------------|
|         Green       |         34       |
|---------------------|------------------|
|         RED         |         34       |
|---------------------|------------------|
|        Yellow       |         34       |
|---------------------|------------------|

因此图表所需的结果将是 4 片红色、蓝色、绿色、黄色

我遇到的问题是因为图表是由 mysql 填充的，所以我无法手动定义颜色，因为每次图表加载时部分的显示方式都会有所不同。

<script type="text/javascript">  
       google.charts.load('current', {'packages':['corechart']});  
       google.charts.setOnLoadCallback(drawChart);  
       function drawChart()  
       {  
            var data = google.visualization.arrayToDataTable([  
                      ['location', 'count'],  
                      <?php 
        $connect = mysqli_connect("localhost", "user", "password", "test");  
if(isset($_POST['but_search'])){
      $fromDate = $_POST['fromDate'];
      $endDate = $_POST['endDate'];

      if(!empty($fromDate) && !empty($endDate)){
         $emp_query .= " and date_of_join 
                      between '".$fromDate."' and '".$endDate."' ";
      }
    }  
        $query = "SELECT location,count(location) as customer_count FROM test.filter where date between '".$fromDate."' and '".$endDate."' group by location ";  
        $result = mysqli_query($connect, $query); 
                      while($row = mysqli_fetch_array($result))  
                      {  
                           echo "['".$row["location"]."', ".$row["count"]."],"; 
                      }  
                      ?>  
                 ]); 
for (var i = 0; i < data.getNumberOfRows(); i++) {
var colors = [];
  colors.push(data.getValue(i, 0));

            var options = {  
                  title: 'Zone Statistics',  
                  is3D:false,  
                  pieHole: 0.4,  
          colors: colors,
          textStyle:{color: 'black'},
          legend:{position: 'none'},
          chartArea: {width: 550, height: 300},
          legend: 'labeled',
              pieSliceText: 'none',
          backgroundColor: '#E4E4E4',
                 };  
            var chart = new google.visualization.PieChart(document.getElementById('pie'));  
            chart.draw(data, options);  
    };
       }

       </script>

【问题讨论】：

标签： google-visualization

【解决方案1】：

这个问题大约有 2 年的历史，但仍未得到解答。让我为您的问题提供一个可能的解决方案。

Google 有选项切片：也可以自定义切片颜色和字体颜色。可以使用所有切片的数组来自定义它们，也可以使用切片的索引来自定义单个切片。

    slices: [{color: 'black'}, {}, {}, {color: 'red'}]
                        or
    slices: {0: {color: 'black'}, 3: {color: 'red'}}

如果颜色作为变量传递，这可用于动态更改颜色。

这是切片颜色的谷歌参考页面。 Piechart

【讨论】：