使用JS charts来画图表(一)——条形图

来源:互联网 发布:参加淘宝培训班有用吗 编辑:程序博客网 时间:2024/06/05 03:26

如上是一张条形图,代码实现如下:

<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");    //导入xmlmyChart.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>

按照这样的格式设置他的颜色等


0 0