如何在高级图表中的工具提示中显示同一属性的多个值？

Question

我正在我的geodjango应用程序的弹出窗口中显示geojson数据中的饼图。下面是javascript代码

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            backgroundColor: 'rgba(0,0,0,0)',
            y: 100
        },
        title: {
            text: 'sfs '
        },
        yAxis: {
            title: {
                text: ' '
            }
        },
        plotOptions: {
            pie: {
//                y:1,
                shadow: false,
//                center: ['50%', '50%'],
                borderWidth: 0,
                showInLegend: false,
                size: '80%',
                innerSize: '60%',
                data: [
                    ['Plant Functional Type1', 18],
                    ['Plant Functional Type2', 14],
                    ['Plant Functional Type3', 11]
                ]
            }
        },
        tooltip: {
//            valueSuffix: '%',
            formatter: function () {
                return  this.series.name +
                        '</b><br/>Species: ' + feature.properties.species +
                        ' <br> name ' + feature.properties.listvalues;
            }
        },
        series: [{
            type: 'pie',
            name: 'PFT',
            dataLabels: {
                color:'white',
                distance: -20,
                formatter: function () {
                    if (this.percentage != 0) return Math.round(this.percentage) + '%';
                }
            }
        }, {
            type: 'pie',
            name: 'PFT',
            dataLabels: {
                connectorColor: 'grey',
                color:'black',
//                y:-10,
                softConnector: false,
                connectorWidth:1,
                verticalAlign:'top',
                distance: 20,
                formatter: function () {
                    if (this.percentage != 0) return this.point.name;
                }
            }
        }]
    });
});

geojson数据是

{"type": "FeatureCollection", "crs": {"properties": {"type": "proj4", "href": "http://spatialreference.org/ref/epsg/4326/"}, "type": "link"}, "features": [{"properties": {"species": "Oxalis corniculata L.", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 1}, {"properties": {"species": "Pinus roxburghii Sargen", "listvalues": 2, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 2}, {"properties": {"species": "Trifolium repens L.", "listvalues": 1, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 3}, {"properties": {"species": "Poa annua L.", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 4}, {"properties": {"species": "Fragaria nubicola Lindley ex Lacatia", "listvalues": 0, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 5}, {"properties": {"species": "Cedrus deodara (Roxb. ex Lambert.) G.Don.", "listvalues": 2, "model": "pft.existing_data_apft"}, "type": "Feature", "geometry": {"coordinates": [76.320083, 32.233167], "type": "Point"}, "id": 6}]}

在工具提示中，我想拆解

1. 列表值为0的所有物种
2. 列表值为1的所有物种
3. 列表值为2的所有物种

怎么做？

这是小提琴

Answer 1

TL；博士

我更新了你的密码。看那弹琴。https://jsfiddle.net/gqe55wj7/3/

我是基于高级图的甜甜圈图实现的。

如果您想要制作饼图而不是甜甜圈图，则应该将一个系列设置为高级图表选项 (而不是多个)。

创建系列

创建内部饼图系列(PFT:植物功能类型)和外部饼图(工厂)。

var colors = Highcharts.getOptions().colors;

// stores the data for every PFT
var datas = {};
$.each(json.features, function (i, feature) {
    var type = feature.properties.listvalues;
    if (!datas[type]) {
        datas[type] = [];
    }
    datas[type].push(feature);
});

// create series.
var pftSeries = [];
var plantSeries = [];
$.each(datas, function (i, features) {
    var color = colors[i];
    pftSeries.push({
        name: 'Plant Functional Type' + i,
        y: features.length,
        color: color
    });

    $.each(features, function (j, feature) {
        plantSeries.push({
            name: feature.properties.species,
            listvalues: feature.properties.listvalues,
            y: 1,
            color: color
        });
    });
});

集系列

$('#container').highcharts({

    //...

    series: [{
        // inner pie chart (PFT).
        type: 'pie',
        name: 'PFT',
        size: '60%',
        data: pftSeries,
        dataLabels: {
            color:'white',
            distance: -20,
            formatter: function () {
                if (this.percentage != 0) return Math.round(this.percentage) + '%';
            }
        }
    }, {
        // outer pie chart (plants).
        type: 'pie',
        name: 'PFT',
        innerSize: '60%',
        size: '80%',
        data: plantSeries,
        dataLabels: {
            connectorColor: 'grey',
            color:'black',
            softConnector: false,
            connectorWidth:1,
            verticalAlign:'top',
            distance: 20,
            formatter: function () {
                if (this.percentage != 0) return this.point.name;
            }
        }
    }]
});

工具提示

指数序列为0是内部图(PFT)。

1. 得到这个点的索引。
2. 用点的索引从datas的键中标识列表值。
3. 从datas[listvalues]中获取植物的数据。
4. 生成工具提示文本并返回。

指数序列为1是外部图表(植物)。

1. 得到这个点的索引。
2. 用点的索引从datas中识别列表值。
3. 生成工具提示文本并返回。

tooltip: {
    formatter: function () {
        var index;
        var listvalues = 0;
        if (this.series.index === 0) {
            // inner pie chart. (PFT)
            index = this.series.data.indexOf(this.point);
            var i = 0;
            for (var key in datas) {
                if (datas.hasOwnProperty(key)) {
                    if (index === i) {
                        listvalues = key;
                        break;
                    }
                    i++;
                }
            }
            var features = '';
            $.each(datas[listvalues], function (i, feature) {
                features += 'Species: ' + feature.properties.species +
                            '<br/> name ' + feature.properties.listvalues + '<br/>';
            });
            return '<b>' + this.series.name + '</b><br/>' + features;
        } else {
            // outer pie chart. (plant)
            index = this.series.data.indexOf(this.point);
            var name = this.point.name;
            var length = 0;
            $.each(datas, function (i, features) {
                length += features.length;
                if (index < length) {
                    listvalues = i;
                    return false;
                }
            });
            return '<b>' + this.series.name + '</b><br/>Species: ' + name + '<br/> name ' + listvalues
        }
    }
},