Plotly.js-使用頻率繪制直方圖

Question

如何使用Plotly.js繪制頻率直方圖？

Plotly.js提供API來繪制具有一組值但不具有頻率值的直方圖。

你可以找到更多關於Plotly直方圖這里- https://plot.ly/javascript/histograms/

這是一個例子：

如果樣本集為{2、3、4、5、2、2、2、3、5}。 Plotly繪制這樣說- https://codepen.io/sgsvenkatesh/pen/eEyyMJ

var x = [2, 3, 4, 5, 2, 2, 2, 3, 5];

var trace = {
    x: x,
    type: 'histogram',
  };
var data = [trace];
Plotly.newPlot('myDiv', data);

但這是我的數據

x = [2, 3, 4, 5];
y = [4, 2, 1, 1];

這表示將值0-2重復4次，將值2-3重復2次，依此類推。

如何使用Plotly.js進行繪制？

Answer 1

檢查此表示方式。

 x = [2, 3, 4, 5]; y = [4, 2, 1, 1]; traces = []; for (var i = 0; i <= x.length - 1; i++) { var yarray = new Array(y[i]).fill(y[i]); var trace = {}; if (i === 0) { trace = { x: yarray, type: 'histogram', name: 0 + " to " + x[i] }; } else if (i === x.length - 1) { trace = { x: yarray, type: 'histogram', name: x[i] + " and above" }; } else { trace = { x: yarray, type: 'histogram', name: x[i - 1] + " to " + x[i] }; } traces.push(trace); } var data = traces; var layout = {barmode: "group"}; // there are three modes that can be set, "overlay", "stack", "group" Plotly.newPlot('myDiv', data, layout); 

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