为应用创建饼图-Java 学习之路

-1

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

所有简单的东西 .

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

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

任何建议将不胜感激 .

乔

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/

回复于 2024-04-26T03:23:36+08:00

为应用创建饼图

1 回答

相关问题