I'm using Vuejs version 2.0 and highchart version 10.1.0.
I tried to use mappie in HighChart version 10.1.0, but an error occurred saying that mappie was not supported.
So, referring to
https://codesandbox.io/s/vue-template-q ... /mappie.js
I made mappie.js and declared mappie in main.js.
However, mappie did not appear in the highchart version 10.1.0.
So I lowered the highchart version to 9.2.0 and tried it again, then it worked.
But I want to use mappie in highchart version 10.1.0.
Also refer to this article.
viewtopic.php?t=47746&p=172445
I wonder if there is another mappie.js supported by the highchart version 10.1.0 and how to use it.
This is the mappie.js I wrote.
Code: Select all
export default function (Highcharts) {
// New map-pie series type that also allows lat/lon as center option.
// Also adds a sizeFormatter option to the series, to allow dynamic sizing
// of the pies.
Highcharts.seriesType(
'mappie',
'pie',
{
center: null, // Can't be array by default anymore
clip: true, // For map navigation
states: {
hover: {
halo: {
size: 5
}
}
},
dataLabels: {
enabled: false
}
},
{
getCenter: function () {
let options = this.options
let chart = this.chart
let name = options.name
let countryPoint = chart.get(name)
let slicingRoom = 2 * (options.slicedOffset || 0)
if (!options.center) {
options.center = [null, null] // Do the default here instead
}
// Replace lat/lon with plotX/plotY
if (options.center.plotX !== undefined) {
options.center = [countryPoint.plotX, countryPoint.plotY]
}
// Handle dynamic size
if (options.sizeFormatter) {
options.size = options.sizeFormatter.call(this)
}
// Call parent function
let result = Highcharts.seriesTypes.pie.prototype.getCenter.call(this)
// Must correct for slicing room to get exact pixel pos
result[0] -= slicingRoom
result[1] -= slicingRoom
return result
},
translate: function (p) {
this.options.center = this.userOptions.center
this.center = this.getCenter()
return Highcharts.seriesTypes.pie.prototype.translate.call(this, p)
}
}
)
}
best regards