试图隐藏第二个轴刻度时，曲线图向上移动

dave 发表于 Dev

戴夫

我目前正在处理一些浮点图，这些图显示与时间有关的单组和多组数据。下面是图表上一组数据的示例图像。

日期时间选择器允许用户比较两个时间范围，其中第二个数据集在初始时间集上绘制。我遇到的问题是，当在第一个数据集上绘制第二个数据集时，整个图形会向上移动，从而显示出隐藏的刻度线应位于的较大空白区域，请参见下面的示例图像。

如您所见，数据集是不同的时间范围，因此它们不能作为比较而位于同一轴上。这是我对轴的选择。

xaxes: [{
            tickColor: "#fff",
            mode: "time",
            timeformat: timeFormat,
            minTickSize: tickSize,
            font: {
                style: "normal",
                color: "#666666"
            },
            axisLabel: xLabel,
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 11,
            axisLabelColour: "#666666",
            axisLabelFontFamily: 'Open Sans',
            axisLabelPadding: 20
        },
        {
            ticks: [],
            mode: "time",
            timeFormat: timeFormat
        }],

应用选项show：在第二个x轴上为false会完全删除移动，但是因为它为false，所以我也删除了图形点的工具提示。

如果需要知道的话，我正在使用flot.time，flot.tooltip和flot.axislabels。这是我的第一个问题，因此任何反馈都将是很棒的:)

van_folmert

我在JSFiddle上的示例。

这全部归结为2个主要更改。将比较图数据分配到第二个x轴：

var dataSet = [{
            data:  [
                [1467669600000, 12],
                [1467709200000, 14]
            ],
            label: 'data1',
            xaxis: 1
        }, {
            data:  [
                [1467583200000, 15],
                [1467622800000, 13],
                [1467662400000, 16]
            ],
            label: 'data2',
            xaxis: 2
        }];

为美观起见，您应该隐藏第二个x轴，这样它就不会镜像相同的小时数（set show: false）

{
    "show": false,
    "mode": "time",
    "timeformat": "%H:%M",
    "tickSize": [2, "hour"],
    "min": 1467583200000,
    "max": 1467666000000,
    "timezone": "browser"
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。