Javascript - Plotly.js数字频率排序
Javascript - Plotly.js数字频率排序
提问于 2018-07-26 22:57:29
我有一个plot.ly，它输入一个数字和数字来查看频率的数字。假设您输入111222333和数字1、2、3。它将显示每个数字重复的条形图。除了一个细节之外，一切似乎都正常，每当我添加随机数时，图形都不会按顺序显示。Here is an example
下面是我的JS代码：
function plotIt() {
event.preventDefault();
var entireNumber = document.getElementById('fullNumber').value.split("");
var number = document.getElementById('digit').value.split("");
var matchedNumbers = [];
entireNumber.forEach(digit => {
if (number.includes(digit)) {
matchedNumbers.push(digit);
}
});
var layout = {
categoryorder: 'category ascending',
xaxis: {
type: 'category',
title: 'Values',
},
yaxis: {
title: '# of repetitions'
},
title:'Count'
};
var histElements = {
x: matchedNumbers,
type: 'histogram',
marker: {
color: 'rgba(235, 77, 75,1.0);',
},
};
var data = [histElements];
//Using ID for div to plot the graph
Plotly.newPlot('graph', data, layout,{scrollZoom:true});
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-30 06:06:58
您在layout中使用了Plotly中不存在的直方图的categoryorder: 'category ascending'。从2018年7月起，您不能在直方图中对分类数据进行排序。但是，在将数组传递给Plotly之前，只需对其进行排序就可以了。
function plotIt() {
var entireNumber = document.getElementById('fullNumber').value.split("");
var number = document.getElementById('digit').value.split("");
number.sort();
var matchedNumbers = [];
entireNumber.forEach(digit => {
if (number.includes(digit)) {
matchedNumbers.push(digit);
}
});
matchedNumbers.sort();
var layout = {
xaxis: {
type: 'category',
title: 'Values',
}
};
var histElements = {
x: matchedNumbers,
type: 'histogram'
};
var data = [histElements];
Plotly.newPlot('graph', data, layout);
}
var button = document.getElementById('button');
button.addEventListener("click", plotIt(), false);<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<form>
<input type='number' id='fullNumber' value='144445522123' >
<input type='number' id='digit' value='0123456789'>
</form>
<button type="button" id='button'>Plot me!</button>
<div id='graph'>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51541904
复制相关文章
相似问题