Question

我试图用R api复制我用剧情创建的情节。在下面提供一个可重复的例子。数据如下

[{"Date":"2017-09-06","variable":"ACC","vol":1.3049,"rebased":127.8198,"Industry":"CEMENT & CEMENT PRODUCTS"},
 {"Date":"2017-09-06","variable":"AMBUJACEM","vol":1.3738,"rebased":125.163,"Industry":"CEMENT & CEMENT PRODUCTS"},
 {"Date":"2017-09-06","variable":"BPCL","vol":1.9167,"rebased":79.9571,"Industry":"ENERGY"},
 {"Date":"2017-09-06","variable":"CESC","vol":2.3585,"rebased":128.2077,"Industry":"ENERGY"},
 {"Date":"2017-09-06","variable":"COALINDIA","vol":1.854,"rebased":80.9094,"Industry":"METALS"},
 {"Date":"2017-09-06","variable":"GRASIM","vol":1.694,"rebased":118.5174,"Industry":"CEMENT & CEMENT PRODUCTS"},
 {"Date":"2017-09-06","variable":"HINDALCO","vol":2.5474,"rebased":127.1915,"Industry":"METALS"},
 {"Date":"2017-09-06","variable":"HINDPETRO","vol":2.4371,"rebased":90.3253,"Industry":"ENERGY"},
 {"Date":"2017-09-06","variable":"HINDZINC","vol":2.044,"rebased":101.6822,"Industry":"METALS"},
 {"Date":"2017-09-06","variable":"IOC","vol":2.1872,"rebased":109.6917,"Industry":"ENERGY"}]

通过以下R代码生成的图表

plot_ly(x = ~vol, y = ~rebased) %>%
  add_markers(color = ~Industry, size = I(10)) %>%
  layout(                        
    title = paste("Risk Reward as of",plotDate), 
    xaxis = list(           
      title = "1 Month Volatility",      
      showgrid = F),       
    yaxis = list(          
      title = "Index value")     
  )

是这样的

js中的相同情节看起来像这样

颜色显然没有映射到房地产行业，而且传说不见了。

以下是我的React组件中的js代码

    let xx = [];
    let yy = [];
    let zz = [];
    this.props.stocks.map( (stock, index) => {
        xx.push(stock.vol);
        yy.push(stock.rebased);
        zz.push(stock.Industry);
        }
    )
    console.log(xx);
    console.log(zz);

    let trace1 = {
        x: xx,
        y: yy,
        mode: 'markers',
        marker: {
            size:10,
            color: zz,
        }
    };

    let data = [trace1];
    let layout = { 
                    margin: { t: 0 },
                    autosize: true ,
                    title: 'Risk Reward as of 2017-09-06',
                    xaxis: {title: '1 Month Volatility'},
                    yaxis: {title: 'Index Value'},
                }


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

分配给上面颜色的变量zz在日志中显示正确的值

(10) ["CEMENT & CEMENT PRODUCTS", "CEMENT & CEMENT PRODUCTS", "ENERGY", "ENERGY", "METALS", "CEMENT & CEMENT PRODUCTS", "METALS", "ENERGY", "METALS", "ENERGY"]

Answer 1

R Plotly的colors函数在JavaScript Plotly中不存在。它是一个便捷函数，可以将输入数据分成多条跟踪（您可以通过检查R返回的JS图来看到它）。

为了获得与JavaScript类似的东西，您需要将数据分配给不同的跟踪，然后将它们传递给Plotly。

＆＃13;

var stocks = [{
  "Date": "2017-09-06",
  "variable": "ACC",
  "vol": 1.3049,
  "rebased": 127.8198,
  "Industry": "CEMENT & CEMENT PRODUCTS"
}, {
  "Date": "2017-09-06",
  "variable": "AMBUJACEM",
  "vol": 1.3738,
  "rebased": 125.163,
  "Industry": "CEMENT & CEMENT PRODUCTS"
}, {
  "Date": "2017-09-06",
  "variable": "BPCL",
  "vol": 1.9167,
  "rebased": 79.9571,
  "Industry": "ENERGY"
}, {
  "Date": "2017-09-06",
  "variable": "CESC",
  "vol": 2.3585,
  "rebased": 128.2077,
  "Industry": "ENERGY"
}, {
  "Date": "2017-09-06",
  "variable": "COALINDIA",
  "vol": 1.854,
  "rebased": 80.9094,
  "Industry": "METALS"
}, {
  "Date": "2017-09-06",
  "variable": "GRASIM",
  "vol": 1.694,
  "rebased": 118.5174,
  "Industry": "CEMENT & CEMENT PRODUCTS"
}, {
  "Date": "2017-09-06",
  "variable": "HINDALCO",
  "vol": 2.5474,
  "rebased": 127.1915,
  "Industry": "METALS"
}, {
  "Date": "2017-09-06",
  "variable": "HINDPETRO",
  "vol": 2.4371,
  "rebased": 90.3253,
  "Industry": "ENERGY"
}, {
  "Date": "2017-09-06",
  "variable": "HINDZINC",
  "vol": 2.044,
  "rebased": 101.6822,
  "Industry": "METALS"
}, {
  "Date": "2017-09-06",
  "variable": "IOC",
  "vol": 2.1872,
  "rebased": 109.6917,
  "Industry": "ENERGY"
}]

let traces = [];
let categories = [];

for (let i = 0; i < stocks.length; i += 1) {
    if (categories.indexOf(stocks[i].Industry) === -1) {
        traces.push({x: [],
                     y: [],
                     mode: 'markers',
                     name: stocks[i].Industry
                    });
        categories.push(stocks[i].Industry);
  } else {
        traces[categories.indexOf(stocks[i].Industry)].x.push(stocks[i].vol);
        traces[categories.indexOf(stocks[i].Industry)].y.push(stocks[i].rebased);
  }
}

Plotly.plot('plot', traces);

</script>

＆＃13;

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

＆＃13;

将标记颜色映射到plotly.js中的分类数据数组

1 个答案: