[Chart:Gauge]???

2014-03-18 16:04:58by ???

仪表图

说明

这篇文章介绍的是如何制作仪表图

思考

如下图是常见的马表图,考虑以下几个重点

  1. 马表图数据的维度是多少

  2. 图中马表图的背景是如何个性化的

  3. 刻度之间不同颜色的背景是如何实现的

  4. 刻度的取值范围以及刻度面板占整个圆的-120度到120度的范围是如何设定的

  5. 间歇性的改变马表的值的如何实现的

代码

function onLoad(e){
    var sf = this;
	if (!sf.renderer.forExport) {
	    setInterval(function () {
	        var record = $('ds').getCurrentRecord(),
	        	y = record.get('speed'),
	            newVal = y + Math.round((Math.random() - 0.5) * 20);
	        if (newVal >= 0 && newVal <= 200) {
		        record.set('speed',newVal);
	        }
	    }, 3000);
	}
}
                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record speed="80"/>
        </a:datas>
        <a:fields>
            <a:field name="speed" datatype="int"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" plotBackgroundColor="null" plotBackgroundImage="null" plotBorderWidth="0" plotShadow="false" type="gauge">
    <a:title text="马表"/>
    <a:yAxis>
        <a:yAxi name="speed" max="200" min="0" minorTickColor="#666" minorTickInterval="auto"
                        minorTickLength="10" minorTickPosition="inside" minorTickWidth="1" tickColor="#666" tickLength="10"
                        tickPixelInterval="30" tickPosition="inside" tickWidth="2">
            <a:title text="km/h"/>
            <a:labels rotation="auto" step="2"/>
            <a:plotBands>
                <a:plotBand color="#55BF3B" from="0" to="120"/>
                <a:plotBand color="#DDDF0D" from="120" to="160"/>
                <a:plotBand color="#DF5353" from="160" to="200"/>
            </a:plotBands>
        </a:yAxi>
    </a:yAxis>
    <a:pane endAngle="150" startAngle="-150">
        <a:backgrounds>
            <a:background borderWidth="0" outerRadius="109%">
                <a:backgroundColor linearGradient="0,0,0,1" stops="[0,&apos;#FFF&apos;],[1,&apos;#333&apos;]"/>
            </a:background>
            <a:background borderWidth="1" outerRadius="107%">
                <a:backgroundColor linearGradient="0,0,0,1" stops="[0,&apos;#333&apos;],[1,&apos;#FFF&apos;]"/>
            </a:background>
            <a:background/>
            <a:background backgroundColor="#DDD" borderWidth="0" innerRadius="103%" outerRadius="105%"/>
        </a:backgrounds>
    </a:pane>
    <a:events>
    	<a:event name="load" handler="onLoad" />
    </a:events>
</a:chart>

注释

  1. 这里用到了z轴来展示气泡图的大小,目前只有气泡图支持zAxis节点。

  2. radialGradient是径向型渐变,3个值分别是圆心x、圆心y和渐变半径。

Demo
  1. ???
Attachments
  1. ???.rar

Comments

0 Responses to the article

暂时没有评论。

发表评论