<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body style="height: 100%; margin: 0">
<div id="myDiv" style="height: 100%"></div>
<script type="text/javascript">
var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',
'Deron<br>Williams', 'Brook<br>Lopez',
'Damian<br>Lillard', 'David<br>West',
'Blake<br>Griffin', 'David<br>Lee',
'Demar<br>Derozan'];
function getrandom(num , mul) {
var value = [ ];
for ( i = 0; i <= num; i++ ) {
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var yData = [
getrandom(10 ,10),
getrandom(30, 20),
getrandom(30, 25),
getrandom(30, 40),
getrandom(30, 45),
getrandom(30, 30),
getrandom(30, 20),
getrandom(30, 15),
getrandom(30, 43),
];
var colors = ['rgba(93, 164, 214, 0.5)', 'rgba(255, 144, 14, 0.5)', 'rgba(44, 160, 101, 0.5)', 'rgba(255, 65, 54, 0.5)', 'rgba(207, 114, 255, 0.5)', 'rgba(127, 96, 0, 0.5)', 'rgba(255, 140, 184, 0.5)', 'rgba(79, 90, 117, 0.5)', 'rgba(222, 223, 0, 0.5)'];
var data = [];
for ( var i = 0; i < xData.length; i ++ ) {
var result = {
type: 'box',
y: yData[i],
name: xData[i],
pointpos: 0,
boxpoints: 'all',
jitter: 0.5,
whiskerwidth: 0.2,
fillcolor: 'cls',
marker: {
size: 6
},
line: {
width: 1
}
};
data.push(result);
};
layout = {
title: 'Points Scored by the Top 9 Scoring NBA Players in 2012',
yaxis: {
zeroline: true,
dtick: 0,
gridcolor: 'rgb(255, 255, 255)',
gridwidth: 1,
zerolinecolor: 'rgb(255, 255, 255)',
zerolinewidth: 2
},
margin: {
l: 40,
r: 30,
b: 80,
t: 100
},
paper_bgcolor: 'rgb(243, 243, 243)',
plot_bgcolor: 'rgb(243, 243, 243)',
showlegend: false
};
Plotly.newPlot('myDiv', data, layout);
</script>
</body>
</html>