Question

我使用ng-google-chart（用于AngularJS版本0.0.11的Google Chart Api指令模块）和Google饼图，我试图以与切片颜色相同的颜色显示图例文字。
Pie Chart View

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

饼图选项

from Tkinter import *
import webbrowser

class Window(Frame):


    def __init__(self, master=None):
        Frame.__init__(self, master)                 
        self.master = master
        self.init_window()

    def init_window(self):  

        self.master.title("Anonymous Button Box")    

        self.pack(fill=BOTH, expand=1)  

        _Button = Button(self, text="Don't Click", command=webbrowser.open("http://example.com", new=2, autoraise="True"))  

        _Click = Button(self, text="Click") 

        _Click.place(x=80, y=0)  

        _Button.place(x=0, y=0)  



root = Tk()

root.geometry("300x300")        

app = Window(root)
root.mainloop()

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>

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

1 个答案: