Карта мира Highchart с пирогом - PullRequest
Новая
       19

Карта мира Highchart с пирогом

0 голосов
/ 08 мая 2018

Вот демоверсия карты с круговыми диаграммами. Карта США с круговыми диаграммами

Но эта карта только для США. Вот моя скрипка Карта мира с круговыми диаграммами 

// 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. В связи с этим я сталкиваюсь с проблемой положения круговой диаграммы в каждом местоположении. Я пытался использовать plotx и ploty. Но это не работает. Так есть ли способ показать круговую диаграмму на территории страны так, как работает карта США?

1 Ответ

0 голосов
/ 09 мая 2018

Вы можете использовать plotX & plotY свойства региона, когда для него не определен широта и долгота.

Замените эти две части кода: 

plotOptions: {
  pie: {
    center: [state.plotX+400, state.plotY]
  }
}

// Handle lat/lon support
if (options.center.lat !== undefined) {
    var point = chart.fromLatLonToPoint(options.center);
    options.center = [
        chart.xAxis[0].toPixels(point.x, true),
        chart.yAxis[0].toPixels(point.y, true)
    ];
}

с этими: 

center: {
  plotX: state.plotX,
  plotY: state.plotY
}

// Replace lat/lon with plotX/plotY
if (options.center.plotX !== undefined) {
  options.center = [options.center.plotX, options.center.plotY];
}

Кстати: использование plotOptions внутри серии недопустимо. plotOptions должен располагаться на верхнем уровне структуры опций графика. Вот больше информации об этом: https://api.highcharts.com/highcharts/plotOptions

Демонстрационная версия: https://jsfiddle.net/BlackLabel/k5mdL6vn/

...