Question

我在图表中使用highcharts。我用“linkedTo”制作了系列，因为我需要按区域对列进行分组并生成显示这些区域的图例。在那之前，结果是期望的结果。但我无法在X轴上显示我的类别名称。在每列下面应该有“A”，“B”，......如图所示。有关代码，请参阅jsfiddle。谢谢你的帮助。

http://jsfiddle.net/yucca/hpkLy6t0/24/

// Create the chart
Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'TEST'
},
subtitle: {
    text: 'TEST'
},
xAxis: {
    type: 'category',
    categories: ['A', 'B', 'C', 'D']
},

legend: {
    enabled: true,
    labelFormatter: function() {
                                return  this.userOptions.id
                            }
},
plotOptions: {
    series: {
        borderWidth: 0,
        dataLabels: {
            enabled: false,
        }
    }
},

tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},

series: [
    {
    id:'China',
    color: '#004f9e',
    data: [1100]
     },
     {
     id:'International',
     color: '#e73357',
      data: [10]
     },
     {
     linkedTo: 'International',
     color: '#e73357',
     data: [1000]
     },
     {
     linkedTo: 'China',
     color: '#004f9e',
      data: [686]
      }
    ]
});

graph

Answer 1

您需要对series进行轻微更改才能实现此目的。

series: [{
        data: [{
            id:'China',
            color: '#004f9e',
            y: 1100
         },{
            id:'International',
            color: '#e73357',
            y: 10
         },{
            linkedTo: 'International',
            color: '#e73357',
             y: 1000
         },{
         linkedTo: 'China',
         color: '#004f9e',
          y: 686
          }], 
       }]

我所做的是以下内容：

我更改了data[]，因此它包含了一系列值。
我将存储为data: [686]的值更改为y: 686

Here you can find a working JSFiddle

highcharts x-axis不显示只有一个值的系列

1 个答案: