Question

我想修复x轴范围，以便在清除图例中的轨迹时，即使一条轨迹的范围不同，x轴范围也不会改变。

我试过了：

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

似乎这应该是全部，但x轴范围仍然会改变。

如果我在布局对象中设置了autorange：false，则绘图失败。 x轴值和刻度都搞砸了。这是为什么？

但是，如果我使用

设置布局对象定义后的autorange属性

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：

如果轴type是“日期”，则必须将日期转换为unix时间（以毫秒为单位）

如果您转换日期（并稍微调整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中不起作用

1 个答案: