5天的Highchart刻度间隔答案

【问题标题】：Highchart tick interval for 5 days5天的Highchart刻度间隔
【发布时间】：2015-03-30 10:22:03
【问题描述】：

我似乎无法弄清楚如何正确设置我的滴答间隔。需要在 X 轴上有 5 天差异的刻度。我想显示 x 轴，如 '1 March 、 5 March 、 10 March 、 15 March ' 等

下面给出的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>

谢谢

【问题讨论】：

这里有什么问题？它在四月之后显示数字，因为您没有说四月之后应该显示什么。
我想显示 1 月到 4 月之间的完整数据
它显示了您在 series.data 数组中指定的数据。完整数据是什么意思？
如果数据是“1 月和 4 月之间”，那么你必须给他们具体的日期。它不能只是猜测点在哪里。如果您坚持使用category，则可以在每个月之间插入空标签，但听起来像是datetime 之类的东西。
我已经更新了我的问题，请帮助我。

标签： jquery highcharts

【解决方案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;
    }
},

【讨论】：

你的回答是正确的，这正是我想要的。非常感谢

【解决方案2】：

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

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

【讨论】：