来自数据属性 highcharts 的 jquery 图表

Question

我不确定我的方向是否正确，但基本上我希望能够制作几个都包含一些 dat attr（名称，值）的 div。这些应该循环通过，并创建一个包含对象的数组。该数组将与highchart js一起使用，创建饼图。

这就是我所拥有的

所以来自div的数据，应该做成数组，基本作为highchart系列的数据使用。

我想我应该做一些每个循环，但我有点迷茫。请帮忙

HTML

<div class="container" data-name="Hans, Peter, Susan" data-value="20, 25, 40"></div>

<div class="container" data-name="Josh, Johan, Tina" data-value="30, 55, 10"></div>

Javascript

$('.container').highcharts({

                    title: false,
                    tooltip: false,
                    plotOptions: {
                        pie: {
                            allowPointSelect: false,
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: 'none',
                                format: '<b>{point.name}</b>: <br /> {point.percentage:.1f} %'
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            {
                                name: 'Peter',   
                                y: 26
                            },
                            {
                                name: 'Susan',       
                                y: 23
                            }
                        ],
                        animation : true
                    }]
                });
            })

Answer 1

确实，您需要遍历图表并从数据属性中获取数据。你在这里：http://jsfiddle.net/3bQne/1045/

var containers = $('.container');

$(containers).each(function (ind, con) {
    var $con = $(con),
        data = $con.attr('data-value').split(', '),
        names = $con.attr('data-name').split(', '),
        dLen = data.length,
        points = [],
        i = 0;

    for (; i < dLen; i++) {
        points.push([names[i], parseInt(data[i], 10)]);
    }
    console.log(points);

    $con.highcharts({
        title: false,
        tooltip: false,
        plotOptions: {
            pie: {
                allowPointSelect: false,
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: 'none',
                    format: '<b>{point.name}</b>: <br /> {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: points,
            animation: true
        }]
    });
})