使用 HT for Web (以下简称 HT)开发有 Chart 需求的项目的时候，感觉很痛苦，HT 集成的 Chart 组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案，接下来我们就来聊聊具体的解决方案。
首先，第一种解决方案是，在定义 Chart 矢量的时候在 comps 中除了定义 Chart 外，再添加几个你自定义的绘制区域来绘制你想要的坐标轴，效果及 example 如下：
该 Chart 的定义代码见附录1(代码的定义太长)，代码虽然长，但是代码的逻辑并不乱，各个模块间的矢量描述还是比较清晰的，具体可以参考 HT 的矢量手册，看到如此长的代码，我自己都没信心去维护它，维护这样的代码纯粹是体力活，而且复用性也不高，每一个不同的 Chart 都要类似如此地绘制，绘制一两个这样的图表感觉还好，绘制多了，真心会感觉很恶心，再这上面很浪费时间。
其次，第二种解决方案是，通过数据绑定来自定义绘制坐标轴。实现以上相同效果，其代码见附录2。可以明显看出其代码量会比第一种解决方案好很多，而且代码可以复用。在其他的图表中，可以将横轴和纵轴的文本内容设置到 data 的 attr 属性上，并在定义 chart 时使用上如下代码就可以实现坐标文本的效果：
ht.Default.setImage('chartName', {width: Number,height: Number,comps: [{// define chart},{type: 'xAxis',rect: Array},{type: 'yAxis',rect: Array}]});
在这里我已经通过 ht.Default.setCompType(‘typeName’, function(g, rect, comp, data, view){}) 的方法定义了名字为 xAxis 和 yAxis 的CompType，这两个 CompType 分别绘制了横轴和纵轴的坐标文本，代替了第一种方案制定多个 CompType 为 text 的写法，稍微优化了下代码，提高代码的可维护性。
但是，这样但使用方法总刚觉有些别扭，明明坐标轴是 Chart 的一部分，在定义 Chart 上却要硬生生地将图表和坐标部分分开，那如果用户还要在定义标题、坐标刻度、坐标说明等需求，那这个方案还是无法爽快的解决大部分通用的需求，需要定义许多 CompType 来渲染不同的需求，而且在使用上也不是那么爽快。接下来要说明的方案三，就是来解决使用上及维护上的问题。
最后，第三种解决方案是，和第二种解决方案差不多，都是通过 ht.Default.setCompType(‘typeName’, function(g, rect, comp, data, view){}) 的方法来定义名字为 axisChart 的 CompType，不同的是，数据并不是设置到 data 中，而是在 ht.Default.setImage() 的 comps 中直接定义其相关属性。具体的配置属性说明及其具体的代码实现可以查看附件，使用方式很简单，在引入 ht.js 核心文件的前提下，引入附件的 axisChart.js 文件即可。
接下来来看下 axisChart 的具体使用及几个简单的例子：
例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图：
代码如下：
ht.Default.setImage('c1', {width: 600,height: 400,comps: [{type: 'axisChart',rect: [0, 0, 600, 400],yAxis: [{name: '单位：V',max: 270,min: 150,splitNumber: 10,axisTitle: {text: '电压',rotate: -90},axisLine: {arrow: true}},{position: 'right',name: '单位：I',max: 20,splitNumber: 20,axisTitle: {text: '电流',rotate: 90},axisLabel: {interval: 1},axisLine: {arrow: true}}],xAxis: [{type: 'category',data: ['抚梅源', '藕花深处', '紫东花园', '紫金苑', '华府山水', '水云间', '瑞景新城'],axisTitle: {text: '小区名称'}}],series: [{label: function(value){return value + ' V';},data: {values: [220, 210, 200, 209, 230, 215, 218],color: '#f90'}},{yAxisPosition: 'right',label: true,data: {values: [10, 4, 15, 9, 12, 18, 7],color: '#af0'}}]}]});
例2: 不同时刻，，不同小区的电压情况的折线图：
代码如下：
ht.Default.setImage('c2', {width: 600,height: 400,comps: [{type: 'axisChart',rect: [0, 0, 600, 400],yAxis: [{name: '单位：V',max: 240,min: 190,splitNumber: 10,axisTitle: {text: '电压',rotate: -90},axisLine: {arrow: true}}],xAxis: [{type: 'time',min: new Date(2015, 0, 1),max: new Date(2015, 0, 2),splitNumber: 25,axisTitle: {text: '时间'},axisLabel: {interval: 2,formatter: function(value, index, min, max){return value.format('dd-hh');}},axisLine: {arrow: true}}],series: [{type: 'line',data: {values: [220, 210, 200, 209, 230, 215, 218, 220, 210, 200, 209, 230, 215, 218, 209, 230, 215, 218, 220, 210, 200, 209, 230, 215, 218],color: '#f90'}},{type: 'line',data: {values: [225, 209, 208, 206, 205, 221, 213, 224, 218, 224, 205, 208, 216, 220, 208, 210, 219, 219, 210, 209, 219, 207, 222, 222, 215],color: '#7d0'}},{type: 'line',linePoint: true,line3d: true,data: {values: [211, 216, 215, 205, 206, 206, 223, 217, 217, 215, 212, 221, 219, 222, 205, 208, 205, 218, 223, 222, 207, 215, 215, 222, 223],color: '#ab0'}}]}]});
转动心中的期待，血在澎湃，吃苦流汗算什么。
