1

我有一个非常简单的折线图案例，其中类别放置在 X 轴上的刻度上。

如何将第一个类别刻度设置在 Y 轴上（将 y=0 和 x="1st category" 设置为图表的原点）？Y 轴与线条实际开始的位置之间似乎总是存在任意偏移。我想取消它。

我几乎是通过在 YAxis 上使用负“偏移量”来实现的，但它是不美观的（因为它在 Y 轴的左侧留下了一点 X 轴），并且这个偏移量的值应该取决于宽度图表（不灵活）。

var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginLeft: 30
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['1990', '1991', '1992', '1993', '1994', '1995'],
            tickmarkPlacement: 'on',
            tickInterval: 1,
            tickPosition: 'inside',
            tickLength: 2
        },
        yAxis: {
            lineWidth: 1,
            tickWidth: 1,
            tickPosition: 'inside',
            tickLength: 2,
            min: 0,
            max: 200,
            tickInterval: 50,
            gridLineWidth: 0
            /*,offset:-26*/
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                }
            }
        },
        series: [{
            data: [100, 125, 150, 125, 90]
        },{
            data: [100, 80, 90, 80, 70]
        },{
            data: [100, 90, 80, 60, 180]
        }]
    });

请看看我的例子：http: //jsfiddle.net/SineDie/xajHE/

4

1 回答 1

2

You can get it to work by abandoning categories, and specifying the indivual x and y points in the dataseries. You can do this using the Date.UTC function to calculate dates from the year values.

Also, Use a datetime x-axis to render the dates, with a minPadding of 0 to make sure the first point appears on the y axis.

  xAxis: {
        type:'datetime',
        tickLength: 2,
        minPadding:0,
        startOnTick:true
    },
 series: [{
        data: [[Date.UTC(1990,0,1,0,0,0),100], [Date.UTC(1991,0,1,0,0,0),125], [Date.UTC(1992,0,1,0,0,0),150], [Date.UTC(1993,0,1,0,0,0),125], [Date.UTC(1994,0,1,0,0,0),90]]
    },{
        data: [[Date.UTC(1990,0,1,0,0,0),100], [Date.UTC(1991,0,1,0,0,0),80], [Date.UTC(1992,0,1,0,0,0),90], [Date.UTC(1993,0,1,0,0,0),80], [Date.UTC(1994,0,1,0,0,0),70]]
    },{
        data: [[Date.UTC(1990,0,1,0,0,0),100], [Date.UTC(1991,0,1,0,0,0),90], [Date.UTC(1992,0,1,0,0,0),80], [Date.UTC(1993,0,1,0,0,0),60], [Date.UTC(1994,0,1,0,0,0),180]]
    }]

http://jsfiddle.net/D6ymT/

于 2013-10-09T08:10:07.920 回答