Question

嘿我正在使用plotlyjs来绘制弯曲方块的面积图。我想要达到的最终结果是这样的：

我正在尝试使用plotlyjs库达到上述结果。我创造了每个正方形有3种不同颜色的正方形：绿色，黄色和红色。每个方格都是一个区域，如果一个点在绿色区域，这意味着它们的健康状况良好，如果它在黄色区域，那么它的健康状况是警告，如果它在红色区域，那么它的健康状况是危险的，等......

现在我正在尝试让正方形有一条曲线，这样它就像原始图片一样呈现弧形。

我正在寻找解决我的问题的方法，我想但是使用'path'而不是'square'形状但是我怎样才能相应地绘制弧？

如果plotlyjs的专家可以帮助我，我会很高兴，提前谢谢。

这是我到目前为止使用的一个例子：

var d3 = Plotly.d3

function normal_array( mean, stddev, size ){
    var arr = new Array(size), i;
    // from http://bl.ocks.org/nrabinowitz/2034281
    var generator = (function() {
        return d3.random.normal(mean, stddev);
    }());   
    
    for( i=0; i< arr.length; i++ ){
        arr[i] = generator();
    }
    return arr;
}

var x0 = normal_array(1, 0, 300);
var y0 = normal_array(1, 0, 300);

var x1 = normal_array(1, 0, 200);
var y1 = normal_array(1, 0, 200)

var x2 = normal_array(1, 0, 200);
var y2 = normal_array(1, 0, 200);


var data = [
    {    
        x: x0,
        y: y0,
        mode: 'markers'
    }, {
        x: x1,
        y: y1,
        mode: 'markers'                
    }, {
        x: x2,
        y: y2,
        mode: 'markers'          
    }, {
        x: x1,
        y: y0,
        mode: 'markers'          
    }             
];

var layout = {
    shapes: [
        {
            type: 'square',
            xref: 'x',
            yref: 'y',
            x0: 0,
            y0: 0,
            x1: 1,
            y1: 1,
            opacity: 0.7,
            fillcolor: 'green',
            line: {
                color: 'green'
            }
        },
        {
            type: 'square',
            xref: 'x',
            yref: 'y',
            x0: 0.5,
            y0: 0.5,
            x1: 1,
            y1: 1,
            opacity: 0.7,
            fillcolor: 'orange',
            line: {
                color: 'orange'
            }
        },
        {
            type: 'square',
            xref: 'x',
            yref: 'y',
            x0: 0.75,
            y0: 0.75,
            x1: 1,
            y1: 1,
            opacity: 0.7,
            fillcolor: 'red',
            line: {
                color: 'red'
            }
        }
        
    ],
    showlegend: false
}

Plotly.newPlot('myDiv', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" style="width: 100%; height: 100%;">

修改我已经成功达到以下结果，svg是颠倒的我不知道如何向正确的方向旋转它。 http://codepen.io/Barak/pen/apYvjW

Answer 1

您可以尝试以下方法：

通过layout.shapes添加3个形状，绿色矩形，黄色和红色圆圈（通过代码段中的for循环完成）
通过layer.shapes.layer: 'below'
通过layout.x/yaxis.showgrid: false
将标记添加为散点图

＆＃13;

var myDiv = document.getElementById('myDiv');
var types = ['square', 'circle', 'circle'];
var pos = [1, 0.7, 0.4];
var colors = ['green', 'yellow', 'red'];
var layout = {
    height: 400,
    width: 400,
    xaxis: {range: [0, 1], showgrid: false},
    yaxis: {range: [0, 1], showgrid: false}, 
    shapes: [],
};
for (var i = 0; i < 3; i +=1) {
    layout.shapes.push({
        type: types[i],
        x0: 1 - pos[i],
        y0: 1 - pos[i],
        x1: 1 + pos[i],
        y1: 1 + pos[i],
        fillcolor: colors[i],
        line: {
            color: colors[i]
        },
        layer: 'below'
    })
}

var data = [{
    type: 'scatter',
    x: [0.5], 
    y: [0.3],
    mode: "markers",
    marker: {
        color: 'black',
        size: 10},
    }]
Plotly.plot(myDiv, data, layout);

＆＃13;

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

＆＃13;

Plotlyjs曲线为方形

1 个答案: