Question

看了一会儿这个问题，但我找不到正确的答案。

见附图。如何控制/增加图表绘图的边距？轴和其余部分应该保持原样，我想在Y轴和图表之间留出更大的余量。

这有可能吗？

小提琴代码：http://jsfiddle.net/klodoma/ood4vykf/1/

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Weather Data for Tokyo'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true

    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 55,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'Rainfall',
        //type: 'spline',
        yAxis: 0,
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 18.5, 26.4, 14.1, 195.6, 154.4],
        tooltip: {
            valueSuffix: ' mm'
        }

    }, 
             {
        name: 'Rainfall2',
        type: 'spline',
        yAxis: 1,
        data: [19.9, 73.5, 100.4, 111.2, 134.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
            valueSuffix: ' mm'
        }

    }]
});

Answer 1

您可以使用Highcharts API利用yAxis对象的offset。

jsfiddle：http://jsfiddle.net/mariocatch/d1e6h96y/1/

yAxis: [{ // Primary yAxis
    labels: {
        format: '{value}°C',
        style: {
            color: Highcharts.getOptions().colors[2]
        },
    },
    title: {
        text: 'Temperature',
        style: {
            color: Highcharts.getOptions().colors[2]
        }
    },
    opposite: true,            
    offset: 50
}, { // Secondary yAxis
    gridLineWidth: 0,
    title: {
        text: 'Rainfall',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    labels: {
        format: '{value} mm',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    offset: 50
}]

Answer 2

我找到了一个解决方案：可以使用Highcharts API中的xAxis和yAxis的offset属性。

“ 技巧 ”是指向 第一个 轴的offset和不是所有人。

    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
        },
        title: {
            text: 'Temperature',
        },
        offset: 150
    },{ // Primary yAxis
        labels: {
            format: '{value}°C',
        },
        title: {
            text: 'Temperature',
        },
        //offset: 50 //do not set this value
    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
        },
        labels: {
            format: '{value} mm',
        },
        opposite: true,
        offset: 50 //set this value, it's an opposite axis!
    }],

这里有一个完整的例子： http://jsfiddle.net/klodoma/2k4akses/3/

Highcharts系列保证金

2 个答案: