Question

这是jsfiddle

如果您将光标移动到图表的右上角，您可以看到工具提示显示最后一段数据来自2015-09-06，但x轴标签显示的日期不是与实际数据保持一致。

如何使x轴（其标签）与我传递给它的实际数据对齐？

作为参考，我只在2015-09-03和2015-09-06日期传递数据，因此图表不应该是这样的。 x轴扭曲了图表。

以下代码：

(function () {
    Highcharts.setOptions({
        lang: {
            months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
            weekdays: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota']
        }
    });

    window.ChartData = JSON.parse('{"collected":[{"created":"1441287599000","amount":"1"},{"created":"1441373999000","amount":"1"},{"created":"1441463999000","amount":"1"},{"created":"1441546799000","amount":"5"}],"challenges":[{"created":"1441287599000","amount":"1"},{"created":"1441291199000","amount":"2"},{"created":"1441291799000","amount":"3"},{"created":"1441553999000","amount":"4"},{"created":"1441561199000","amount":"5"},{"created":"1441568399000","amount":"6"}],"participants":[{"created":"2015-09-03 15:39:59","amount":"1"},{"created":"2015-09-03 16:39:59","amount":"2"},{"created":"2015-09-03 16:49:59","amount":"2"},{"created":"2015-09-06 17:39:59","amount":"3"},{"created":"2015-09-06 19:39:59","amount":"8"},{"created":"2015-09-06 21:39:59","amount":"18"}],"initialUnixMilliseconds":1441287599000,"pointsInterval":86400000}');

    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'area',
                marginTop: 100
            },
            credits: false,
            title: {
                text: ''
            },
            subtitle: {
                text: ''  //can be html
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function () {
                        return moment(this.value).format('D. M.');
                    }
                }
            },
            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },
            legend: {
                symbolRadius: 130,
                symbolWidth: 10,
                symbolHeight: 10,
                align: 'center',
                verticalAlign: 'top',
                floating: true,
                x: 0,
                y: 0
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },
            plotOptions: {
                area: {
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [
                //{
                //  name: 'test',
                //  color: '#499814',
                //  data: [
                //      [Date.UTC(2015, 9, 21), 1],
                //      [Date.UTC(2015, 9, 22), 1],
                //      [Date.UTC(2015, 9, 23), 1],
                //      [Date.UTC(2015, 9, 24), 1],
                //      [Date.UTC(2015, 9, 25), 5]
                //  ],
                //  pointStart: Date.UTC(2015, 9, 21),
                //  pointInterval: ChartData.pointsInterval
                //},


                //{
                //  name: 'počet výzev',
                //  color: '#499814',
                //  data: processData(ChartData.challenges),
                //  pointStart: ChartData.initialUnixMilliseconds,
                //  pointInterval: ChartData.pointsInterval
                //},
                {
                    name: 'počet účastníků',
                    color: '#F4E134',
                    data: processData(ChartData.participants),
                    pointStart: ChartData.initialUnixMilliseconds,
                    pointInterval: ChartData.pointsInterval
                },
                // {
                //  name: 'počet  odeslaných DMS',
                //  color: '#D34F6A',
                //  data: shuffle(range(240)),
                //  pointStart: ChartData.initialUnixMilliseconds,
                //  pointInterval: ChartData.pointsInterval
                //},
                //{
                //  name: 'vybraných prostředků',
                //  color: '#66ADFF',
                //  data: processData(ChartData.collected),
                //  pointStart: ChartData.initialUnixMilliseconds,
                //  pointInterval: ChartData.pointsInterval
                //}
            ]
        });
    });

    function processData(data) {
        var result = [];
        $.map(data, function (obj) {
            result.push([obj.created, Number(obj.amount)]);
        });
        console.log(result);
        return result;
    }

    function range(n) {
        return Array.apply(null, Array(n)).map(function (_, i) {
            return i;
        })
    }

    function shuffle(array) {
        var counter = array.length, temp, index;

        // While there are elements in the array
        while (counter > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * counter);

            // Decrease counter by 1
            counter--;

            // And swap the last element with it
            temp = array[counter];
            array[counter] = array[index];
            array[index] = temp;
        }

        return array;
    }
}());

//$.each(ChartData.challenges, function (i, v) {
//  console.log(new Date(Number(v.created)));
//});

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

我已在https://jsfiddle.net/Nishith/Lp3tjpuv/1/更新了你的小提琴删除以下部分

   labels: {
                    formatter: function () {
                    return moment(this.value).format('D. M.');
                    }
            }

Answer 2

要实现这一目标，请使用Axis.tickPositioner，例如：

            tickPositioner: function(min, max) {
                return this.series[0].xData.slice();
            },

并演示：https://jsfiddle.net/Lp3tjpuv/2/

如何将Highcharts datetime x-axis与我传递给它的数据对齐？

2 个答案: