Highchart 报价间隔为 5 天

Question

我似乎无法弄清楚如何正确设置我的滴答间隔。需要在 X 轴上有 5 天的差异。我想显示 x 轴，如“3 月 1 日、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

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

这意味着您无法使用 Highcharts 做您想做的事。我建议你看看 jquery flot。它支持你想要的。 https://flot.googlecode.com/svn/trunk/API.txt

Answer 2

您可以随时使用 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;
    }
},

Highchart 报价间隔为 5 天

Highchart tick interval for 5 days

jquery

highcharts