初识visifire图表「建议收藏」

全栈程序员-站长 • 2022年7月21日上午7:46 • 未分类 • 阅读 11

大家好，又见面了，我是你们的朋友全栈君。

    在使用过jschart之后，觉得对俺们中国人不是很友善，短时间内是不会支持中文，没法用，也就这样就认识了visifire图表，第一次浏览他的网站就被他的华丽迷上了。
    从他的网站上download下来，压缩包里面已经包含了samples。
    首先必须在自己的机器上面安装微软的siverlight控件，否则你是不能浏览图表的，这个好办，到微软的网站上下载就可以了。
    安装好siverlight,再打开samples中的firstchart.htm,你就可以看见那个漂亮的柱状图了。可是一旦你把他发布到你的网站上去，呵呵！！打开这个网页居然是一片空白。
    费了老大的劲，才搞定，原来是IIS设置导致visifire的图表显示一片空白。visifire图表要工作，必须要他bin目录下的文件支持，其中有一个visifire2.js比较好理解，因为你的网页文件必须要引用他，其中还有一个SL.Visifire.Charts.xap文件，导致visifire显示空白的原因就在这，因为被IIS咔嚓掉了，我们需要在iis的mime类型中注册 .xap为application。
    设置后，再打开网站，效果出来了。
    现在可以定定心研究一下他的结构了。
1.首先要引入这个js文件：<script type=”text/javascript” src=”Visifire2.js”></script>
2.声明一个div层作为容器：<div id=visifirechart></div>
3.生成图表         var vChart = new Visifire2(“SL.Visifire.Charts.xap ” , 500 , 300 );
                   vChart.setDataXml(chartXmlString);
                    vChart.render(“VisifireChart”);
基本上和我前面提到的jschart差不多。其中最重要的就是 chartxmlstring,这个就是我们要表现的数据，下面是这个图表例子中的数据,采用xml语言规范,抽象出结构为：
<vc:chart>
      <vc:chart.titles>
        <vc:title text=”图表的标题”/>
      </vc:chart.titles>
      <vc:chart.axesx>
         <vc:axis title=”x轴标签”/>
      <vc:chart.axesy>
         <vc:axis title=”y轴标签”/>
      </vc:chart.axesy>
      <vc:dataseries renderas=”pie” axisytype=”primary”>
         <vc:DataSeries.DataPoints>
             <vc:DataPoint AxisXLabel=”xlabel标记” YValue=”Y轴值” />
             <vc:DataPoint AxisXLabel=”xlabel标记” YValue=”Y轴值” />
         </vc:dataseries.datapoints>
      </vc:dataseries>
</vc:chart>
    了解了他的数据结构,我们做一个图表就简单了,需要修改的就是 <vc:DataPoint AxisXLabel=”xlabel标记” YValue=”Y轴值” />这里.我们大多数情况的时候都是从数据库中调取数据,那如何处理呢! visifire chart的帮助文档里面有一个实例文件,不过感觉不是很很好.
我希望的结果应该是 varchar.setdataxml(xml.xml),里面是一个xml文件,或者是一个动态程序文件.前几天使用jschart,可以这样使用的,也不知道visifire可不可行.
    图表样式很多，其实好多参数我们根本不用去记,只需要到他的网站上进入设计界面,即可以来个所见即所得的图表,然后将代码拷贝过来就可以了,绝对傻瓜式.
    以前用过dundas的图表控件，觉得效果不错，但是现在一用visifire，觉得好像更好些。