zoukankan      html  css  js  c++  java
  • highcharts的柱状图边线

      今天用highcharts做饼图和柱状图,显示一些简单信息,发现柱状图做出来有点不尽人意,还是请教同事才将线去掉。

      data里面的是后台数据,就不显示出来了,主要就是yAxis中的gridLineWidth赋0,想了半天,看来还是请教比较方便。。。。

     var Chart = new Highcharts.Chart({
                                                        chart: {
                                                            type: 'column',
                                                            renderTo: renderTo,
                                                            margin: [0, -20, -15, -20],
                                                            backgroundColor: 'rgba(255, 255, 255, 0)'
                                                        },
                                                        title1: {
                                                            text: Year + '年 ' + Entity.CantonName + ' 保有量统计',
                                                            style: { color: 'white' }
                                                        },
                                                        yAxis: {
                                                            gridLineWidth: 0
                                                        },
                                                        tooltip: {
                                                            formatter: function () {
                                                                return this.point.name + ':&nbsp;&nbsp;&nbsp;<br/>' + this.y + '<br/>所占比例:&nbsp;&nbsp;&nbsp;&nbsp;<br/>' + Highcharts.numberFormat(TotalQuantity == 0 ? 0 : this.y / TotalQuantity * 100, 2, '.') + '%';
                                                            }
                                                        },
                                                        plotOptions: {
                                                            column: {
                                                                stacking: 'percent',
                                                                dataLabels: {
                                                                    enabled: true,
                                                                    verticalAlign: "middle",
                                                                    y1: -2,
                                                                    style: {
                                                                        fontWeight: 'bold'
                                                                        , color: 'white'
                                                                    },
                                                                    formatter: function () {
                                                                        if (this.y != null) {
                                                                            return this.y;
                                                                        } else {
                                                                            return "";
                                                                        };
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        series: [{
                                                            name: Entity.CantonName,
                                                            data: data
                                                        }]
                                                    });

      highcharts花出来的图还是比较好看的,用的也是比较多的。http://www.highcharts.com/里面比较全,像我这种英文不是很好的,只能靠翻译软件来查看了。

  • 相关阅读:
    多表模型
    母版,单表操作,双下划线模糊查询
    模板层
    视图层
    路由层
    orm
    浅谈cookie,sessionStorage和localStorage区别
    实现元素垂直居中的方法(补充)
    实现元素垂直居中的方法
    <a href="javascript:;"></a>
  • 原文地址:https://www.cnblogs.com/gzbnet/p/3193675.html
Copyright © 2011-2022 走看看