Question

我目前在页面上有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>

Answer 1

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

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

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

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

这是切片颜色的Google参考页。 Piechart

根据mysql值更改Google饼图切片的颜色

1 个答案: