修复 x-range 在 plotly.js 中不起作用

Question

我想修复 x 轴范围，这样当您清除图例中的轨迹时，x 轴范围不会改变 — 即使一条轨迹具有不同的范围。

我试过了：

range: ["2016-05-01", "2016-05-05"]

似乎这应该是全部，但 x 轴范围仍在变化。

如果我在布局对象中设置 autorange: false，绘图将失败。 x 轴值和刻度都乱七八糟。这是为什么？

但是，如果我在布局对象定义之后设置自动范围属性

layout_autorange_after = false;

那么一切顺利

HTML:

<div id="graph"></div>
<h3>Layout with <code>range</code> set but no <code>autorange</code></h3>
<div id="autorange"></div>
<h3>Layout with <code>range</code> set and <code>autorange: false</code></h3>
<div id="autorange-set-after"></div>
<h3>Layout with <code>range</code> set and <code>autorange</code> 
set after with <code>layout_autorange_after = false;</code></h3>
<script src="script.js"></script>

JAVASCRIPT:

var data = 
[
    {
        x: ["2016-05-01", "2016-05-02", "2016-05-03"],
        y: [4, 5, 6],
        mode: "lines+markers",
        name: "Test",
        yaxis: "y"
    },
    {
        x: ["2016-05-02", "2016-05-04", "2016-05-05"],
        y: [10, 2, 9],
        mode: "lines+markers",
        name: "Test 2",
        yaxis: "y2"
    }
];

var layout = 
{
    height: "300",
    width: "500",
    xaxis:
    {
        showgrid: false,
        domain:[0.2,1],
        range: ["2016-05-01", "2016-05-05"],
        type:"date",
        showline:true,
    },
    yaxis:
    {
        title: "Test",
        position: 0,
        range: [3,7],
        color: "red",
        showline: true,
        showgrid: false,
    },
    yaxis2:
    {
        title: "Test 2",
        position: 0.2,
        overlaying:"y",
        range: [1,11],
        color: "blue",
        showline: true,
        showgrid: false,
    }
};

var layout_autorange = 
{
    height: "300",
    width: "500",
    xaxis:
    {
        showgrid: false,
        domain:[0.2,1],
        range: ["2016-05-01", "2016-05-05"],
        autorange: false,
        type:"date",
        showline:true,
    },
    yaxis:
    {
        title: "Test",
        position: 0,
        range: [3,7],
        color: "red",
        showline: true,
        showgrid: false,
    },
    yaxis2:
    {
        title: "Test 2",
        position: 0.2,
        overlaying:"y",
        range: [1,11],
        color: "blue",
        showline: true,
        showgrid: false,
    }
};

Plotly.plot('graph', data, layout);
Plotly.plot('autorange', data, layout_autorange);

layout_autorange_after = JSON.parse(JSON.stringify(layout));
layout_autorange_after.xaxis.autorange = false;
Plotly.plot('autorange-set-after', data, layout_autorange_after)

http://plnkr.co/edit/mtHNWF4zTBBivmRDnwY2?p=preview

Answer 1

您正在使用 date 作为轴 type。来自 documentation:

If the axis type is "date", then you must convert the date to unix time in milliseconds

如果您转换日期（并稍微调整 x 轴），它应该会按预期工作，即不需要 autorange=false 并且删除一条轨迹不会改变轴。

var data = 
[
    {
        x: [1462060800000, 1462147200000, 1462233600000],
        y: [4, 5, 6],
        mode: "lines+markers",
        name: "Test",
        yaxis: "y"
    },
    {
        x: [1462233600000, 1462320000000, 1462406400000],
        y: [10, 2, 9],
        mode: "lines+markers",
        name: "Test 2",
        yaxis: "y2"
    }
];

var layout = 
{
    height: "300",
    width: "500",
    xaxis:
    {
        showgrid: false,
        domain:[0.2,1],
        range: [1462060800000 - 6000000, 1462406400000],
        showline:true,
        type: "date"
    },
    yaxis:
    {
        title: "Test",
        position: 0,
        range: [3,7],
        color: "red",
        showline: true,
        showgrid: false,
    },
    yaxis2:
    {
        title: "Test 2",
        position: 0.2,
        overlaying:"y",
        range: [1,11],
        color: "blue",
        showline: true,
        showgrid: false,
    }
};


Plotly.plot('graph', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph"></div>

修复 x-range 在 plotly.js 中不起作用

Fixing x-range not working in plotly.js

javascript

plot

graph

plotly