Hide highcharts series name on the chart

问题

I am messing around with highcharts for a company project and I have the name/number from calculations (totals) being displayed int he legend. The problem is they also display on the graph. I can't for the life of me figure out how to turn them off on the chart, yet leave them on in the legend. I've read through the API and maybe I missed it but could use some help if you all don't mind.

Code:

 Highcharts.chart('high_charts_admin', {
    title: {
        text: 'Adset ID: '+results[1].data[0].adset_id,
    },

    subtitle: {
        text: 'Campaign Name: '+results[1].data[0].campaign_name, 
    },

    yAxis: {
        title: {
            text: ''
        }
    },
    xAxis: {
        title: {
            text: 'Day of the Campaign',
        }, 
        //type: 'datetime', 
        categories: results[0][8]
    },
    legend: {
        //labelFormatter: function() {
        //    return '<span style="color: '+this.color+'">'+ this.name + '</span>';
        //  },
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        itemWidth: 250,
        itemStyle: {
            fontSize: '16px',
            color: 'black'
         },
         itemMarginTop: 12,
         itemMarginBottom: 12,
         squareSymbol: true,
         symbolHeight: 25,
         symbolWidth: 30,
         symbolRadius: 100,
    },
    chart: {
        marginRight: 300,
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 0,
            type: 'series',
            //showInLegend: false,
        }
    },        
    series: [{
        name: 'Results: '+results[2][0],
        data: results[0][0],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Reach: '+results[2][1],
        data: results[0][1],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Impressions: '+results[2][2],
        data: results[0][2],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, { 
        name: 'Cost Per Lead: '+results[2][3],
        data: results[0][3],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Spend: '+results[2][4],
        data: results[0][4],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CTR (All): '+results[2][5],
        data: results[0][5],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CPC (All): '+results[2][6],
        data: results[0][6],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Clicks: '+results[2][7],
        data: results[0][7],
        type: 'spline',
        marker: {
            radius: 2
        },
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                 legend: {
                 layout: 'horizontal',
                     align: 'center',
                     verticalAlign: 'bottom'
                 }
            }
        }]
    }
});

Here is my code:

    Highcharts.chart('high_charts_admin', {
    title: {
        text: 'Adset ID: '+results[1].data[0].adset_id,
    },

    subtitle: {
        text: 'Campaign Name: '+results[1].data[0].campaign_name, 
    },

    yAxis: {
        title: {
            text: ''
        }
    },
    xAxis: {
        title: {
            text: 'Day of the Campaign',
        }, 
        //type: 'datetime', 
        categories: results[0][8]
    },
    legend: {
        //labelFormatter: function() {
        //    return '<span style="color: '+this.color+'">'+ this.name + '</span>';
        //  },
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        itemWidth: 250,
        itemStyle: {
            fontSize: '16px',
            color: 'black'
         },
         itemMarginTop: 12,
         itemMarginBottom: 12,
         squareSymbol: true,
         symbolHeight: 25,
         symbolWidth: 30,
         symbolRadius: 100,
    },
    chart: {
        marginRight: 300,
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 0,
            type: 'series',
            //showInLegend: false,
        }
    },        
    series: [{
        name: 'Results: '+results[2][0],
        data: results[0][0],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Reach: '+results[2][1],
        data: results[0][1],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Impressions: '+results[2][2],
        data: results[0][2],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, { 
        name: 'Cost Per Lead: '+results[2][3],
        data: results[0][3],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Spend: '+results[2][4],
        data: results[0][4],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CTR (All): '+results[2][5],
        data: results[0][5],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CPC (All): '+results[2][6],
        data: results[0][6],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Clicks: '+results[2][7],
        data: results[0][7],
        type: 'spline',
        marker: {
            radius: 2
        },
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                 legend: {
                 layout: 'horizontal',
                     align: 'center',
                     verticalAlign: 'bottom'
                 }
            }
        }]
    }
});

回答1:

You have added total value in the series name

name: 'Results: '+results[2][0],

So it is showing in charts as well as in legend.

Instead of this you should use custom param in series defination like

  series: [{
    name: 'Results1',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot,num)=>{return tot+num}),
    type: 'spline',
    marker: {
      radius: 5
    }
  }]

Above I added total param in series, then I will use labelFormatter to show the total value in legend.

  legend: {
    labelFormatter: function() {
      return this.userOptions.name + ': ' + this.userOptions.total
    },
  },

Highcharts.chart('container', {


  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  legend: {
    labelFormatter: function() {
      return this.userOptions.name + ': ' + this.userOptions.total
    },
  },

  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },
  series: [{
    name: 'Results1',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot, num) => {
      return tot + num
    }),
    type: 'spline',
    marker: {
      radius: 5
    },
  }, {
    name: 'Results2',
    data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4],
    total: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4].reduce((tot, num) => {
      return tot + num
    }),
    type: 'spline',
    marker: {
      radius: 5
    },
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container" style="height: 400px"></div>

Fiddle demo

回答2:

I think that removing the series-label module script from your HTML document is a solution which you are looking for.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

Demo: https://jsfiddle.net/BlackLabel/f6rya8k3/

API: https://api.highcharts.com/highcharts/plotOptions.series.label

来源：https://stackoverflow.com/questions/49822274/hide-highcharts-series-name-on-the-chart

标签

graph

Highcharts

legend

series

display