javascript - highcart.js pointInterval 为 15 天日期时间 x 轴

Question

我希望 x 轴的时间间隔为半个月。我发现我可以使用 pointInterval，但我不确定为什么它不能按预期工作

http://jsfiddle.net/nizsu/otatsrbq/

我预计 x 轴值为:8 月 26 日、9 月 11 日、9 月 26 日

html

 <div class="module" id="changelist">
            <div id="chart1" style="min-width: 90%; height: 400px; margin: 0 auto"></div>
        </div>

js

$(function () {
    $('#chart1').highcharts({       
        xAxis: {
            type: 'datetime',
            pointInterval: 13 * 24 * 3600 * 1000, //half month interval
            pointStart: Date.UTC(2014, 7, 26),
            dateTimeLabelFormats: { 
                month: '%b %e',
                year: '%b'
            }
        },
        series: [{
            name: 'New Visits',
            data: [
                [Date.UTC(2014, 7, 26), 50],
                [Date.UTC(2014, 7, 27), 60],
                [Date.UTC(2014, 7, 28), 65],
                [Date.UTC(2014, 7, 29), 70],
                [Date.UTC(2014, 7, 30), 20],
                [Date.UTC(2014, 7, 31), 10],
                [Date.UTC(2014, 8, 1), 75],
                [Date.UTC(2014, 8, 2), 80],
                [Date.UTC(2014, 8, 3), 85],
                [Date.UTC(2014, 8, 4), 77],
                [Date.UTC(2014, 8, 5), 70],
                [Date.UTC(2014, 8, 6), 20],
                [Date.UTC(2014, 8, 7), 17],
                [Date.UTC(2014, 8, 8), 80],
                [Date.UTC(2014, 8, 9), 75],
                [Date.UTC(2014, 8, 10), 73],
                [Date.UTC(2014, 8, 11), 78],
                [Date.UTC(2014, 8, 12), 82],
                [Date.UTC(2014, 8, 13), 15],
                [Date.UTC(2014, 8, 14), 18],
                [Date.UTC(2014, 8, 15), 65],
                [Date.UTC(2014, 8, 16), 70],
                [Date.UTC(2014, 8, 17), 67],
                [Date.UTC(2014, 8, 18), 73],
                [Date.UTC(2014, 8, 19), 80],
                [Date.UTC(2014, 8, 20), 17],
                [Date.UTC(2014, 8, 21), 22],
                [Date.UTC(2014, 8, 22), 65],
                [Date.UTC(2014, 8, 23), 63],
                [Date.UTC(2014, 8, 24), 68],
                [Date.UTC(2014, 8, 25), 65],
                [Date.UTC(2014, 8, 26), 70]
            ]
        }, {
            name: 'Total Visits',
            data: [
                [Date.UTC(2014, 7, 26), 75],
                [Date.UTC(2014, 7, 27), 78],
                [Date.UTC(2014, 7, 28), 80],
                [Date.UTC(2014, 7, 29), 85],
                [Date.UTC(2014, 7, 30), 35],
                [Date.UTC(2014, 7, 31), 30],
                [Date.UTC(2014, 8, 1), 90],
                [Date.UTC(2014, 8, 2), 95],
                [Date.UTC(2014, 8, 3), 95],
                [Date.UTC(2014, 8, 4), 97],
                [Date.UTC(2014, 8, 5), 93],
                [Date.UTC(2014, 8, 6), 30],
                [Date.UTC(2014, 8, 7), 25],
                [Date.UTC(2014, 8, 8), 90],
                [Date.UTC(2014, 8, 9), 95],
                [Date.UTC(2014, 8, 10), 93],
                [Date.UTC(2014, 8, 11), 99],
                [Date.UTC(2014, 8, 12), 95],
                [Date.UTC(2014, 8, 13), 35],
                [Date.UTC(2014, 8, 14), 30],
                [Date.UTC(2014, 8, 15), 95],
                [Date.UTC(2014, 8, 16), 94],
                [Date.UTC(2014, 8, 17), 92],
                [Date.UTC(2014, 8, 18), 95],
                [Date.UTC(2014, 8, 19), 100],
                [Date.UTC(2014, 8, 20), 30],
                [Date.UTC(2014, 8, 21), 33],
                [Date.UTC(2014, 8, 22), 95],
                [Date.UTC(2014, 8, 23), 91],
                [Date.UTC(2014, 8, 24), 90],
                [Date.UTC(2014, 8, 25), 94],
                [Date.UTC(2014, 8, 26), 95]
            ]
        }]
    });     
    });

Answer 1

您想要的设置是tickInterval，而不是点间隔。您还需要指定 startOnTick: true 以使其从您的第一个点开始。

    xAxis: {
        type: 'datetime',
        tickInterval: 13 * 24 * 3600 * 1000, //half month interval
        pointStart: Date.UTC(2014, 7, 26),
        startOnTick: true,
        dateTimeLabelFormats: { 
            month: '%b %e',
            year: '%b'
        }
    },

http://jsfiddle.net/pdy4deew/