Question

如何在下面堆叠的条形图中为每个条形图分别设置标签。目前，如果您发现2条，我会列出一个类别。对于每个酒吧，我需要一个单独的类别。我尝试使用该系列中的名称选项，但对我而言不起作用。另外，我尝试给出多个也不起作用的类别。

    $(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Historic World Population by Region'
    },
    subtitle: {
      text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Population (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        },
        stacking: 'normal'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 80,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
    },
    credits: {
      enabled: false
    },
    series: [
    // first stack
        {
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 0
        }, {
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 0
        // second stack
        }, {
            data: [106.4, 129.2, 144.0, 29.9, 71.5],
            stack: 1
        }, {
            data: [148.5, 216.4, 30, 176.0, 135.6],
            stack: 1
        }
    ]
  });
});

如果您在下图中注意到，而不是2条带有1个标签。每个栏我都需要一个单独的标签

https://github.com/Alex-D/Cookies-EU-banner jsfiddle

Answer 1

我通过使用x轴格式化程序而不是类别找到了解决方案

var labels = ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth']
var labels1 = ['Overall Rate', 'Overall Rate', 'Overall Rate', 'Overall Rate', 'Overall Rate', 'Overall Rate']
$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Historic World Population by Region'
    },
    subtitle: {
      text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
     // categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
     labels: {
      formatter: function() {
       
        return labels[this.pos] + "<br/>" + labels1[this.pos];
      }
    },
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Population (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        },
        stacking: 'normal'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 80,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
    },
    credits: {
      enabled: false
    },
    series: [
    // first stack
        {
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 0
        }, {
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 0
        // second stack
        }, {
            data: [106.4, 129.2, 144.0, 29.9, 71.5],
            stack: 1
        }, {
            data: [148.5, 216.4, 30, 176.0, 135.6],
            stack: 1
        }
    ]
  });
});

带有单独标签的堆积条形图

1 个答案: