可视化：基于值的饼图图例文本颜色

Question

我正在使用 ng-google-chart（Google Chart Api Directive Module for AngularJS version 0.0.11）和 Google Pie图表，我正在尝试以与切片颜色相同的颜色显示图例文本。
Pie Chart View

有没有办法将切片颜色放入 legend.textStyle 选项？

饼图选项

 drvPie.options = {
    pieHole: 0.9,
    pieSliceText: 'value',
    pieSliceTextStyle: {
        'fontSize': '25'
    },

    slices: {
        0: { color: 'green' },
        1: { color: 'orange' },
        2: { color: 'red' }
    },
    height: '100%',
    chartArea: {'width': '100%', 'height': '70%'},
    legend: {
        "textStyle": {
            color: 'blue', 
            fontSize: 15
        },
        labeledValueText: 'value',
        "position": "labeled"

    }
};

Answer 1

遗憾的是，不支持为每个项目指定单独的图例样式，但您可以考虑以下演示如何自定义图例标签的解决方案：

google.setOnLoadCallback(drawChart);
function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task Status', 'Count'],
      ['At work', 22],
      ['Terminated', 3],
      ['Not working', 13]
    ]);

    var options = {
        pieHole: 0.9,
        pieSliceText: 'value',
        pieSliceTextStyle: {
            'fontSize': '25'
        },

        slices: {
            0: { color: 'green' },
            1: { color: 'orange' },
            2: { color: 'red' }
        },
        height: '100%',
        chartArea: { 'width': '100%', 'height': '70%' },
        legend: {
            "textStyle": {
                fontSize: 15
            },
            labeledValueText: 'value',
            "position": "labeled"

        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    google.visualization.events.addOneTimeListener(chart, 'ready', function(){
        configureLegendLabel(data,options);
    });
    google.visualization.events.addListener(chart, 'onmouseover', function (e) {
        configureLegendLabel(data,options);
    });
    google.visualization.events.addListener(chart, 'onmouseout', function (e) {
        configureLegendLabel(data,options);
    });
    chart.draw(data, options);
}


function configureLegendLabel(data,options)
{
    for(var key in options.slices){
       var labelText = data.getValue(parseInt(key),0);
       var label = $("text:contains('" + labelText +  "')");
       label.attr('fill',options.slices[key].color);       
    }
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

可视化：基于值的饼图图例文本颜色

Visualization: Pie Chart Legend Text color based on Value

charts

visualization

legend

google-visualization

angularjs