jschart 柱状图

Life is short , play more!
本文来自lihao's Blog,转载请注明。

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>


发表评论

电子邮件地址不会被公开。 必填项已用*标注