javascript - Highstock Y 轴标签相互重叠

Question

请看一下我正在构建的图表的这个小提琴。

我的问题是：

• Y 轴标签和百分比重叠。是否可以对齐它们，以便我有绿色百分比，标签“二”，然后是红色百分比，最后是标签“三”？如果你看一下另一个小提琴，它肯定看起来更整洁。
• Highstock 在图表网格内显示其标签。可以将它们推到外面，使标签看起来更像我的第二个 JSFiddle 显示它们的方式吗？

第一个问题对我来说是最重要的，如果我必须解决第二个问题，我可以忍受：

chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: [{
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                }
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            }
        },
        {

             title: {
                text: 'Two',
                style: {
                    color: 'green'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'green'
                }
            },
  opposite: true
        },
{

             title: {
                text: 'THree',
                style: {
                    color: 'red'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'red'
                }
            },
  opposite: true
        }  
      ],

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

});​

Answer 1

您可以使用yAxis.labels.x和yAxis.title.margin的组合来控制这些位置。

例如第一个 yAxis：

        {
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                },
                margin: 25 //push out 25 pixels
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                },
                x: -20 //push out 20 pixels
            }
        }

在这里更新了小提琴。