Jquery 为应用程序创建饼图

我正在开发一个应用程序，它需要一个饼图来显示一组模块。模块需要是可点击的，向数据库发送一个值，显示模块被点击的次数。切片将根据此数据库值更改颜色等。切片的大小总是相等的

都是些简单的东西

我的问题是你会使用什么制图系统。我一直在看谷歌图表，但我无法在不改变其在图表中的“权重”的情况下，在一个切片中注册一个值。因此，理想情况下，我希望将data stage=“2”添加到可以使用自定义方法访问的每个切片中

谷歌图表似乎也很重，我需要什么

如有任何建议，将不胜感激

---

Joe

您可以使用Google Visualization API PieCharts并将有关单击的元数据存储在DataTable中的一个单独的列中。它的工作原理如下：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn('number', 'Number of clicks');

    data.addRows([
        ['Foo', 1, 0],
        ['Bar', 1, 0],
        ['Baz', 1, 0],
        ['Bat', 1, 0],
        ['Cad', 1, 0]
    ]);

    var columns = [0, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function (dt, row) {
            // return the number of clicks as the formatted value of the pie slice
            return {v: data.getValue(row, 1), f: data.getValue(row, 2).toString()};
        }
    }];

    function setColors () {
        var colors = [
            '#3366cc', '#dc3912', '#ff9900', '#109618', '#990099',
            '#0099c6', '#dd4477', '#66aa00', '#b82e2e', '#316395',
            '#994499', '#22aa99', '#aaaa11', '#6633cc', '#e67300',
            '#8b0707', '#651067', '#329262', '#5574a6', '#3b3eac',
            '#b77322', '#16d620', '#b91383', '#f4359e', '#9c5935',
            '#a9c413', '#2a778d', '#668d1c', '#bea413', '#0c5922'
        ];
        options.colors = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
            var clicks = data.getValue(i, 2);
            if (clicks < colors.length) {
                options.colors.push(colors[clicks]);
            }
            else {
                options.colors.push(colors[colors.length - 1]);
            }
        }
    }

    var chart = new google.visualization.PieChart(document.querySelector('#chart_div'));
    var options = {
        height: 400,
        width: 600,
        pieSliceText: 'value'
    };

    google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getSelection();
        if (selection.length > 0) {
            var clicks = data.getValue(selection[0].row, 2);
            clicks++;
            data.setValue(selection[0].row, 2, clicks);
            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            setColors();
            chart.draw(view, options);
        }
    });

    var view = new google.visualization.DataView(data);
    view.setColumns(columns);

    setColors();
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Value'）；
data.addColumn（'number'，'number of clicks'）；
data.addRows([
[Foo'，1,0]，
['Bar'，1,0]，
['Baz'，1,0],，
[Bat'，1，0]，
[Cad'，1，0]
]);
变量列=[0{
键入：“编号”，
标签：data.getColumnLabel（2），
计算：函数（dt，行）{
//返回单击次数作为饼图切片的格式化值
返回{v:data.getValue（第1行），f:data.getValue（第2行）.toString（）；
}
}];
函数setColors（）{
变量颜色=[
"3366cc","dc3912","ff9900","109618","990099",，
"0099c6","dd4477","66aa00","b82e2e","316395",，
"994499","22aa99","aaaa11","6633cc","e67300",，
"8b0707","651067","329262","5574a6","3b3eac",，
"b77322","16d620","b91383","f4359e","9c5935",，
“a9c413”、“2a778d”、“668d1c”、“bea413”、“0c5922”
];
options.colors=[]；
对于（var i=0；i0）{
var clicks=data.getValue（选择[0]。第2行）；
点击++；
data.setValue（选择[0]。第2行，单击）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（列）；
设置颜色（）；
图表绘制（视图、选项）；
}
});
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（列）；
设置颜色（）；
图表绘制（视图、选项）；
}
load（'visualization'，'1'，{packages:['corechart']，callback:drawChart}）；

---

参见示例：

另一个主题与您的主题完全相同。嗨，太棒了！唯一的问题是，我无法引用哪个切片对应于表中的行，我可以用另一列来做吗？哦，我现在明白了！你真是太棒了！