饼图

时间:2018-05-08 13:37:16

标签: highcharts position pie-chart highmaps

这是带有饼图的地图的高清演示。 US map with pie charts

但这张地图仅适用于美国。这是我的小提琴。 World wide map with pie charts

// Add the pies after chart load, optionally with offset and connectors
Highcharts.each(chart.series[0].points, function (state) {
if (!state.id) {
    return; // Skip points with no data, if any
}

var pieOffset = state.pieOffset || {},
    centerLat = parseFloat(state.properties.latitude),
    centerLon = parseFloat(state.properties.longitude);

// Add the pie for this state
chart.addSeries({
    type: 'mappie',
    name: state.id,
    zIndex: 6, // Keep pies above connector lines
    sizeFormatter: function () {
        var yAxis = this.chart.yAxis[0],
            zoomFactor = (yAxis.dataMax - yAxis.dataMin) /
                (yAxis.max - yAxis.min);
        return Math.max(
            this.chart.chartWidth / 45 * zoomFactor, // Min size
            this.chart.chartWidth / 11 * zoomFactor * state.sumVotes / maxVotes
        );
    },
    tooltip: {
        // Use the state tooltip for the pies as well
        pointFormatter: function () {
            return state.series.tooltipOptions.pointFormatter.call({
                id: state.id,
                hoverVotes: this.name,
                demVotes: state.demVotes,
                repVotes: state.repVotes,
                libVotes: state.libVotes,
                grnVotes: state.grnVotes,
                sumVotes: state.sumVotes
            });
        }
    },
    data: [{
        name: 'Democrats',
        y: state.demVotes,
        color: demColor
    }, {
        name: 'Republicans',
        y: state.repVotes,
        color: repColor
    }, {
        name: 'Libertarians',
        y: state.libVotes,
        color: libColor
    }, {
        name: 'Green',
        y: state.grnVotes,
        color: grnColor
    }],
    plotOptions: {
      pie: {
        center: [state.plotX+400, state.plotY]
      }
    }
}, false);

// Draw connector to state center if the pie has been offset
/*  if (pieOffset.drawConnector !== false) {
    var centerPoint = chart.fromLatLonToPoint({
            lat: centerLat,
            lon: centerLon
        }),
        offsetPoint = chart.fromLatLonToPoint({
            lat: centerLat + (pieOffset.lat || 0),
            lon: centerLon + (pieOffset.lon || 0)
        });
    chart.series[2].addPoint({
        name: state.id,
        path: 'M' + offsetPoint.x + ' ' + offsetPoint.y +
            'L' + centerPoint.x + ' ' + centerPoint.y
    }, false);
} */
});

我想显示地图全球地图,其中每个饼代表一个国家/地区。一切都工作正常但是world.js文件没有lat和long值。我正面临着每个location.i尝试使用plotx和ploty的positon问题。但它不起作用。那么,有没有什么方法可以像在美国地图一样在乡村地区展示馅饼?

0 个答案:

没有答案