plotly.js 的区域范围

Question

是否可以使用类似于 Highcharts (http://www.highcharts.com/demo/arearange-line) 的 plotly.js 创建区域范围图。我发现的示例 (https://plot.ly/alpha/workspace/?fid=AgManager:20) 在处理数据系列方面并不令人满意。我宁愿有一个最大值和最小值的系列。谢谢

Answer 1

您需要向数据中添加三个数组：平均值、最小值和最大值。首先绘制平均值，然后绘制最小值和最大值。使用 fill: 'tonexty' 获取阴影。

var plotDiv = document.getElementById('plot');
var traces = [
    {name: 'avg', x: [1,2,3], y: [1,3,2], marker:{color: 'blue'}},
 {name: 'min', x: [1,2,3], y: [0.5,2,1], marker:{color: 'lightblue'}},
 {name: 'max', x: [1,2,3], y: [3,6,2.5], fill: 'tonexty', marker:{color: 'lightblue'}}
];


Plotly.newPlot(plotDiv, traces)

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

</div>

plotly.js 的区域范围

Area range with plotly.js

plotly