如何消除yAxis和数据之间的差距？ [英] How to remove the gap between yAxis and data?

问题描述

我正在设计一个Highchart以匹配现有的设计。然而，我仍然在yAxis和数据的开始之间留下了空隙。查看示例：。

I'm styling up a Highchart to match an existing design. I'm however left with a gap between the yAxis and the start of the data. See the example: http://jsfiddle.net/MDGkd/

How can I get the xAxis to start on the yAxis?

var colors = ['#77217b', '#9c50b1', '#e1d0e6', '#f5f0f7', '#f1e9f4'];

$(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'area',
            marginLeft: 80,
            marginBottom: 80
        },
        colors: colors,
        legend: {
            borderRadius: 0,
            borderWidth: 0,
            itemStyle: {
                fontFamily: 'Helvetica',
                color: '#000000',
                fontSize: '16px'
            }
        },
        title: {
            text: 'Historic and Estimated Worldwide Population Distribution by Region',
            style: {
                fontFamily: 'Helvetica',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '20px'
            },
            margin: 45
        },
        subtitle: {
            text: 'Source: Wikipedia.org',
            style: {
                fontFamily: 'Helvetica',
                color: '#000000',
                fontSize: '16px'
            },
            y: 40
        },
        xAxis: {
            startOnTick: true,
            min: 0,
            max: 6,
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            lineColor: '#000000',
            tickmarkPlacement: 'on',
            tickLength: 14,
            tickWidth: 1,
            tickColor: '#000000',
            title: {
                enabled: false
            },
            labels: {
                style: {
                    fontFamily: 'Helvetica',
                    color: '#000000',
                    fontSize: '12px'
                },
                align: 'left',
                x: -3,
                y: 26
            }
        },
        yAxis: {
            lineColor: '#000000',
            lineWidth: 1,
            tickLength: 24,
            tickWidth: 1,
            tickColor: '#000000',
            gridLineWidth: 1,
            gridLineColor: '#e8d4ec',
            title: {
                text: 'Percent',
                style: {
                    fontFamily: 'Helvetica',
                    color: '#000000'
                },
                x: -40
            },
            labels: {
                style: {
                    fontFamily: 'Helvetica',
                    color: '#000000',
                    fontSize: '12px'
                },
                align: 'left',
                x: -24,
                y: 16
            }
        },
        tooltip: {
            backgroundColor: '#000000',
            borderRadius: 0,
            borderWidth: 0,
            shadow: false,
            style: {
                fontFamily: 'Helvetica',
                color: '#ffffff',
                fontSize: '11px'
            },
            //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
            formatter: function () {
                var s = '<b>' + this.x + '</b>';

                $.each(this.points, function (i, point) {
                    s += '<br/>' + point.series.name + ': <b>' + Highcharts.numberFormat(point.percentage, 1) + '%</b> (' + point.y + 'millions)';
                });

                return s;
            },
            shared: true
        },
        plotOptions: {
            area: {
                stacking: 'percent',
                lineColor: '#8f3ba7',
                lineWidth: 2,
                marker: {
                    lineWidth: 0,
                    lineColor: null,
                    fillColor: '#000000',
                    symbol: 'circle'
                }
            }
        },
        series: [{
            name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }]
    });
    $.each(chart.series, function (i, val) {
        console.log(i, colors[i]);
        this.legendSymbol.attr('rx', 0);
        this.legendSymbol.attr('ry', 0);
        this.legendSymbol.attr('width', 16);
        this.legendSymbol.attr('height', 16);
        this.legendSymbol.attr('y', 5);
        this.legendSymbol.attr('fill', colors[i]);
    });

    console.log(chart);
});

解决方案

You want it to look like this?

I achieved this by adjusting the startOnTick and min values.

    xAxis: {
        startOnTick: false,
        min: 0.5,

Fiddle here.

这篇关于如何消除yAxis和数据之间的差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！