jquery - 为应用程序创建饼图

Question

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

都是简单的东西。

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

对于我需要的东西，谷歌图表似乎也很重？

任何建议将不胜感激。

乔

Answer 1

您可以使用 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});

见例子：http: //jsfiddle.net/asgallant/8qdhC/