5天的Highchart刻度间隔

Posted 2023-03-14

【中文标题】5天的Highchart刻度间隔

【英文标题】：Highchart tick interval for 5 days

【发布时间】：2015-03-30 10:22:03

【问题描述】：

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

Fiddle Example

下面给出的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 之类的东西。

我已经更新了我的问题，请帮助我。

【参考方案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