当前图表

Question

当前图表

xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
        text: null
    },
    labels: {
        x : 25,
        align: 'left'
    }
},

我的脚本在这里 http://jsfiddle.net/puff0211/dtcLn8sm/14/

所需图表

有谁知道要做到这一点？

谢谢！

Answer 1

此处的解决方案之一是通过left属性稍微改变两个轴的位置（它没有记录，但它有效）并使用 SVG渲染器创建其他标签。 chart.events.load对它来说是个好地方，因为当它启动ticks值并且已经计算了位置时 - 我们可以使用它们来创建其他标签：

    load: function() {
      var ticks = this.xAxis[0].ticks,
        renderer = this.renderer;

      for (var prop in ticks) {
        var t = ticks[prop];
        if (t.label) {
          var coords = t.label.xy,
            label = renderer.text(t.pos + 1, coords.x - additionLabelsOffset, coords.y).add();
        }
      }
    }
(...)

xAxis: {
   left: axesOffset
   (...)
}, 
yAxis: {
   left: axesOffset
   (...)
}

现场演示： http://jsfiddle.net/kkulig/cq2otgr1/

API参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

Answer 2

我的解决方案很简单。

让图表边距保持宽度与左边标签。（api use chart.margin）
允许X轴可以显示2个标签。（api使用useHTML和formatter）

代码：

    chart: {
        type: 'bar',
        margin: [ 0, 0, 70, 70]
    },
    {...},
    xAxis: {
        labels: {
            x : 0,
            align: 'left',
            useHTML: true,
            formatter: function() {
                return '<div style="position: relative; top: 0px; right: 50px"> No. '+ (this.pos + 1) +'</div>\
                <div style="position: absolute; top: 0px; left: 20px"><b>'+ this.value +'</div>';
        }
    }

现场演示：http://jsfiddle.net/puff0211/pv84nLub/

API参考：

如何将排名设置为前10名并将x轴标签放在水平条形图的右侧？

当前图表

所需图表

2 个答案:

我的解决方案很简单。