HignCharts：实现刻度在顶部的图表

之前项目中就已经引入了HignCharts进行图表绘制，也写过一篇HignCharts：线形图饼图绘制及时间等定制…

刻度在顶部的图表.itlao5.com

现在的需求相似上图，可以发现，其实就是一个刻度在顶部的柱形图，然而，在HignCharts演示中能找到的相似图表如下图：

chart.itlao5.com

所幸，参考HignCharts的api，发现很多内容都是可以修改的，通过一系列的定制，终于实现了需要的效果。

主要是对yAxis的解决（这样type是‘bar’，对x,y轴位置进行了更换，横向为y轴，所以修改yAxis）：包含opposite: true将坐标轴显示在顶部，设置minorTick（次刻度线）而不是tick（刻度线），从而让刻度线显示在内部，修改offset以及lables的y属性，调整数字显示位置等…

其余都是对属性的隐藏，包含标题，x轴lable，导出按钮，提醒文字，版权信息等…

具体js如下：

var chart = Highcharts.chart('container', {    chart: {        type: 'bar',        spacing: [0, 20, 0, 10]    },    colors: ['#d6cf12'],    title: {        text: ''    },    subtitle: {        text: ''    },    xAxis: {        categories: [''],        title: {            text: null        },        lineWidth: 0    },    yAxis: {        min: 0,        title: {            text: ''        },        labels: {            align: 'center',            y: 20,            overflow: 'justify'        },        lineWidth: 1,        lineColor: '#648bef',        opposite: true,        minorTickInterval: 'auto',        minorTickPosition: 'inside',        minorTickWidth: 1,        minorTickLength: 6,        minorTickColor: '#648bef',        showLastLabel: false,        offset: 15    },    plotOptions: {        bar: {            dataLabels: {                enabled: true            }        }    },    legend: {        enabled: false    },    series: [{        name: '',        data: [125]    }],    exporting: {        enabled: false    },    credits: {        enabled: false    },    tooltip: {        enabled: false    },});

head中导入：

  <script src="../highcharts/highcharts.js"></script>  <script src="../highcharts/modules/exporting.js"></script>  <script src="../highcharts/modules/oldie.js"></script>  <script src="../highcharts-plugins/highcharts-zh_CN.js"></script>

html代码：

  <div id="container" style="min-width:400px;height:80px"></div>

ps: 之所以使用HignCharts并花费时间做这样的定制化，而不是直接通过js和css来实现这样一个自己设置控件，有两个起因：1. 之前项目本就引入了HignCharts； 2. 本人主要是做Android开发，接触.net/js/css这些东西时间不长，本着能用现成的坚决不造轮子挖坑的目的…

简书：ThinkinLiu 博客: IT老五

IT老五（it-lao5）：关注公众号，一起源创，一起学习！