jschart 柱状图
jschart 柱状图
例子展示
代码如下
<html><head>
<title>JSChart</title>
<script type=”text/javascript” src=”http://www.jscharts.com/script/jscharts.js?v=3.0″></script>
</head><body>
<div id=”graph”>Loading graph…</div>
<script type=”text/javascript”> var myData = new Array([‘安全’, 1], [‘商店’, 1], [‘服务’, 3], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5], [‘xxx’, 5]); //数据
var myChart = new JSChart(‘graph’, ‘bar’); // 将在div的id为graph 的div中画一个柱状图
myChart.setDataArray(myData); myChart.setBarColor(‘#42aBdB’); // bar的颜色
myChart.setBarOpacity(0.8);// bar柱的透明度 myChart.setBarBorderColor(‘#D9EDF7’); // border的颜色
myChart.setBarValues(false); //是否在柱状上显示数值 myChart.setTitleColor(‘#8C8383’); // title 的颜色
myChart.setTitle(‘什么什么图 –数据更新时间：22:3783’); myChart.setAxisColor(‘#777E81’); myChart.setAxisValuesColor(‘#777E81’); myChart.setAxisNameY(‘静态代码质量级别’); myChart.setTooltip([‘安全’, ‘<span style=”color:red;”>level 0</span>’]); myChart.setAxisPaddingLeft(70); myChart.setAxisNameX(”); myChart.setShowYValues(false); myChart.setLabelY([5,’level 5′]); myChart.setLabelY([4,’level 4′]); myChart.setLabelY([3,’level 3′]); myChart.setLabelY([2,’level 2′]); myChart.setLabelY([1,’level 1′]); myChart.setLabelY([0,’level 0′]); myChart.setBarSpacingRatio(40); myChart.setAxisValuesFontSizeX(0.1); myChart.setAxisValuesFontSizeY(0.1); myChart.setSize(1024,500); myChart.set3D(true); myChart.setBarValues(false); myChart.draw(); </script>
</body></html>
此篇文章已被阅读2825 次