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/

为应用创建饼图

1 个答案: