Question

我使用highcharts创建了一个简单的气泡图，x轴值是时间戳。除了显示多个相同日期的标签外，每件事情都很好。

创建了一个jsfiddle：http://jsfiddle.net/anvk4y0o/

代码：

$('#container').highcharts({
    chart: {
        type: 'bubble',
        zoomType: 'xy'
    },

    title: {
        text: 'Highcharts Bubbles'
    },

    xAxis: {
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%m/%d/%Y', this.value);
            }
        }
    },

    series: [{
        // data: [[1437415889539,36,79],[1437415899539,74,60],[1437515889539,76,58]]
        data: [{
            x: 1437416876595,
            y: 10,
            z: 34435
        }, {
            x: 1437503398847,
            y: 60,
            z: 24435
        }]
    }]
});

我只想展示我所拥有的x值。

由于

Answer 1

Highcharts将自动尝试填写一系列日期。由于您只提供了这两个日期的数据集，插件正在尝试制作完整的图表，但只能使用该日期范围。添加一个跨越较长日期范围的较大数据集后，它应该进行补偿。在此之前，您可以添加显示时间的选项。这将使您更全面地了解图表中发生的情况。 Documentation

       xAxis: {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            },
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%m/%d/%Y %H:%M:%S', this.value);
                }
            }
        },

DEMO

编辑：在演示中，您可能需要将结果窗口放大，以便正确查看date_time标签。

此外，您可以尝试使用tickInterval选项强制应用范围，或者考虑将时间戳更改为不包括时间，仅考虑实际日期。

Answer 2

您可以通过设置tickInterval和startOnTick / endOnTick来定义刻度。其他解决方案是使用tickPositions / tickPositioner。

        startOnTick: true,
        endOnTick:true,
        tickInterval: 24 * 3600 * 1000, // one day

示例：http://jsfiddle.net/anvk4y0o/3/

Highcharts在x轴中多次显示额外的标签

2 个答案: