Highstock Y轴标签相互重叠

Question

请查看我正在构建的图表fiddle。

我的问题是：

• Y轴标签和百分比重叠。有可能将它们对齐，以便我有绿色百分比，标签“两个”，然后是红色百分比，最后是标签“三个”？如果你看看另一个fiddle它肯定看起来更整洁。
• 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
            }
        }

更新了小提琴here。