Original address: github.com/Daotin/fe-b… You can also find me at:

  • Making (a star! ✨ ✨ ✨)
  • CSDN
  • Blog garden
  • The Denver nuggets
  • Wechat official account: Front-end Captain

In the following scenario, series. Data is passed the processed percentage data:

// Dimension 1: score 1, total 2
// Dimension 2: score 4, total 10
// Dimension 1: score 6, total 10

Highcharts.chart('container', {
    title: {
        text: 'Demo'
    },
    xAxis: {
        categories: ['dimension 1'.'dimension 2'.'dimension 3'],},yAxis: {
      min: 0.max: 100,},tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>'.shared: true
    },

    series: [{
        name: 'Dimension classification'.data: [50.40.60]}});Copy the code

So the tip for each point is a percentage of the data that was passed in.

Now I have a requirement that I want the tip of the dot to show the score instead of the percentage. What do I do?

Since we pass in data other than series. Data, we cannot use either the pointFormat attribute or the pointFormatter method, because both of these are transliterations of the data that is passed in.

The formatter method solves our problem:

We can get the current point value and its index in the data array index, and then group the dimensions into an array. The index position of the array is the dimension score of the current point value.

The partial code is as follows:

tooltip: {
    shared: true.// pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>',
    formatter: function () {
        return this.points.reduce(function (s, point) {
            return s + '<br/>' +
                `<span style="color:${point.series.color}">${point.series.name}</span>` + ':' + me.catescore[point.point.index] + 'points';
        }, '<b>' + this.x + '</b>'); }},Copy the code

One might wonder, why don’t you just pass in the dimension score to series.data instead of the percentage?

Since the total score of the dimensions varies, I want to convert all dimensions into percentages (yAxis sets min and Max), so that the overall display is more beautiful.

Reference links:

  • Api.highcharts.com/highcharts/…

Denver annual essay | 2020 technical way with me The campaign is under way…