这篇博客介绍了如何使用JS Charts库创建条形图，包括数据设置、颜色配置和选项定制。示例中展示了浙江南方石化等公司的条形图数据，通过XML定义了各数据项的值和颜色。
如上是一张条形图，代码实现如下：
<html>
<head>
<title>部门管理</title>
<script type="text/javascript" src="codebase/jscharts.js"></script>
</head>
<body>
<div id="graph">Loading graph...</div>
<script type="text/javascript">
var myChart = new JSChart('graph', 'bar'); 新建一个图
myChart.setDataXML("data/chart.xml"); //导入xml
myChart.setSize(1100, 800); //设置大小
myChart.setTitle("按集团和管理部门统计"); //设置标题
myChart.draw(); //用jscharts将他画出来
/* var myChart = new JSChart('graph', 'pie'); //下面注释掉的是一张饼图，方法是一样的
myChart.setTitle("按集团和管理部门统计");
myChart.setSize(1100, 800);
myChart.setDataXML("data/pie.xml");
myChart.draw(); */
</script>
</body>
</html>那么xml格式是怎么样的呢？
<?xml version="1.0" encoding="UTF-8"?>
<JSChart>
<dataset type="bar">
<data unit="浙江南方石化工业有限公司" value="1" />
<data unit="浙江物产电子商务有限公司" value="1" />
<data unit="浙江物产金属集团有限公司" value="4" />
<data unit="浙江省物产集团公司" value="6" />
<data unit="省属集团企业" value="3" />
</dataset>
<colorset>
<color value="#FACC00" />
<color value="#FB9900" />
<color value="#FB6600" />
<color value="#FB4800" />
<color value="#CB0A0A" />
<color value="#F8F933" />
</colorset>
<optionset>
<option set="setBarColor" value="'#42aBdB'" />
<option set="setBarOpacity" value="0.8" />
<option set="setBarBorderColor" value="'#D9EDF7'" />
<option set="setBarValues" value="false" />
<option set="setTitleColor" value="'#8C8383'" />
<option set="setAxisColor" value="'#777E81'" />
<option set="setAxisValuesColor" value="'#777E81'" />
</optionset>
</JSChart>
按照这样的格式设置他的颜色等
扫一扫
1337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
