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

  • 1,935 views
  • 阅读模式

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

HignCharts:实现刻度在顶部的图表
刻度在顶部的图表.itlao5.com

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

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老五


HignCharts:实现刻度在顶部的图表
IT老五(it-lao5):关注公众号,一起源创,一起学习!

weinxin
扫码关注微信公众号--IT老五
微信扫一扫关注公众号,获取更多实用app,订阅地址不定时更新
Liu, Thinkin
  • 本文由 发表于 2019-04-27 22:15:59
  • 转载请务必保留本文链接:https://itlao5.com/909.html
评论  0  访客  0
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定