Question

我似乎无法弄清楚如何正确设置我的刻度间隔。需要勾选X轴上的5天差异。我想显示x轴，如3月3日，3月5日，3月10日，3月15日。等

下面给出的Java脚本

            <script type="text/javascript">
            $(function () {
            $('#container').highcharts({
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: 'USD to EUR exchange rate from 2006 through 2008'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                            'Click and drag in the plot area to zoom in' :
                            'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval:24 * 3600 * 1000,
                },
                yAxis: {
                    title: {
                        text: 'Exchange rate'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },

                series: [{
                    type: 'area',
                    name: 'USD to EUR',
                    pointInterval: 24 * 3600 * 1000,
                    pointStart: Date.UTC(2015, 2, 1),
                    data: [[140],[127],[35],[132],[192],[179],[131],[206],[92],[57],[352],[370],[281],[282],[128],[100],[33],[215],[154],[226],[225],[334],[105],[60],[264],[227],[151],[115],[184],[74]]        
                }]
            });
            });
            </script>

由于

Answer 1

您始终可以使用tickPositioner，演示：http://jsfiddle.net/96x5dz5c/2/

xAxis: {
    type: 'datetime',
    tickInterval:24 * 3600 * 1000 * 5,
    tickPositioner: function(min, max){
         var interval = this.options.tickInterval,
             ticks = [],
             count = 0;

        while(min < max) {
            ticks.push(min);
            min += interval;
            count ++;
        }

        ticks.info = {
            unitName: 'day',
            count: 5,
            higherRanks: {},
            totalRange: interval * count
        }


        return ticks;
    }
},

Answer 2

刻度问题是Highcharts的一个功能。它不支持所有数字作为间隔，我的意思是在这里报告：https://github.com/highslide-software/highcharts.com/issues/1104

这意味着你不能用Highcharts做你想做的事。我建议你看一下jquery flot。它支持你想要的东西。 https://flot.googlecode.com/svn/trunk/API.txt

Highchart滴答间隔为5天

2 个答案: