样式高图x和y轴

Question

我遇到了问题，无法找到进一步的方法。我正在尝试使用highcharts设计图表。但无法在左侧显示正确的百分比值，并将底部和左侧线条设置为一点，以便它们看起来像在第一个屏幕中。与底部标签下的勾号相同的问题，它们似乎无法移动到顶部，因此它们将覆盖中间的底线。

这是必须的：

这是我到目前为止所做的：

以下是我的代码的外观：http://jsfiddle.net/8Wp7k/

和highcharts设置：

$j('.investor-calculator .chart-container .chart').highcharts({
    title: {
        text: '',
        x: -20 /*center*/
    },
    background: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, 'rgb(96, 96, 96)'],
            [1, 'rgb(16, 16, 16)']
        ]
    },
    subtitle: {
        text: '',
        x: -20
    },
    xAxis: {
        categories: ['Янв', 'Мар', 'Май', 'Июл', 'Сен', 'Ноя'],
        tickmarkPlacement: 'on',
        tickColor: '#d2d2d2',
        gridLineColor: '#eee',
        tick: false
    },
    yAxis: {
        title: null,
        tickPosition: 'inside',
        gridLineDashStyle: 'longdash',
        lineColor: '#d2d2d2',
        lineWidth: 1
    },
    tooltip: {
        valueSuffix: null
    },
    series: [{
        name: 'Some Name',
        data: [1.0, 6.9, 2.5, 8.5, 1.0, 12.5]
    }],
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    colors: ['#e0502f'],
    plotOptions: {
        series: {
            lineWidth: 4,
            marker: {
                enabled: false
            }
        }
    }
});

Answer 1

对于Y轴标签，you need to use：

        labels: {
            format: '{value} %'
        },
        tickInterval: 5

Fiddle

对于刻度位置，您只能在“内部”或“外部，per the documentation，它们不能跨越x轴。

至于Axes交叉，Steve P有这个答案

Answer 2

要移动x轴标签，请在x轴上添加如下内容：

 labels:{
        y:25
 }

对于y轴，您可以强制勾选间隔为5％，并格式化标签，如下所示：

    tickInterval: 5,
    labels: {
        format: '{value} %'
    }

http://jsfiddle.net/Kd5k7/

进行一些调整：

您可以使用偏移来移动轴位置，例如：

 yAxis: {
        min:-4,
        startOnTick:false,
        offset:-20

min和startOnTick强制y轴从-4开始，但不会打印标签，因为min不是5的倍数。

http://jsfiddle.net/P9M3t/