Highcharts将绘图点对齐从y轴开始

时间:2013-05-08 20:57:24

标签: highcharts

我已尽力让图表从图表的绝对左侧(偏移量,minPadding,startOnTick等)开始。无论我做什么,我都无法从远方开始。这是图片示例: enter image description here

这是一个代码示例im JsFiddle,您可以在其中尝试: http://jsfiddle.net/agrublev/VDVpu/3/

以下是一些代码:

chart: {
        type: 'area',
        height: '175'
    },
    legend: false,
    plotOptions: {
        series: {
            events: {
                click: function (e) {
                    location.href = e.point.options.url;
                }
            },
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, 'rgba(201,241,217,0)'],
                    [1, 'rgba(201, 241, 217,1)']
                ]
            }
        }
    },
    title: {
        text: false
    },
    xAxis: {
        categories: ['04/17', '04/17', '04/17', '04/18', '04/19', '04/19', '04/20', '04/20', '04/21', '04/21'],
        labels: {
            align: "left"
        },tickmarkPlacement: 'on',
        startOnTick: true
    },
    yAxis: {
        title: {
            text: false
        },
        labels: {
            formatter: function () {
                return '$' + (this.value).formatMoney(0);
            },
            y: 15
        },
        alternateGridColor: '#f4f8f9',
        gridLineColor: '#c4dce2' 
    },

非常感谢任何帮助!

3 个答案:

答案 0 :(得分:2)

不要使用分类的xAxis,尝试使用labelformatter或线性或日期时间。 示例:

xAxis: {
  labels: {
    formatter: function(){
       return names[this.value];
    }
  }
}

其中names是类别数组。请参阅:http://jsfiddle.net/9tpao7Lf/

答案 1 :(得分:0)

我认为不是类别系列,而是选择像here

这样的日期时间序列

我已经改变了你可以在http://jsfiddle.net/VDVpu/4/

查看的jsfiddle
xAxis:{
 type:'datetime',
}

答案 2 :(得分:0)

如果您不想改变xAx的类型,一种可能的解决方案是使用min& xAxis选项中的最大值。

对于jsfiddle代码后面的referance检查 http://jsfiddle.net/zdMTy/58/

    var categories = ['A', 'B', 'C', 'D','E'];
    xAxis: {
          categories: categories,
          min: 0.5,
          max:categories.length - 1.5
    }