highcharts常用设置

plotLines 参考线

• yAxis中的plotLines是在y轴自定义一条线，比如现在每个刻度是5，但是4这个值是个比较特殊的，是个分割线，这时可以使用该属性定义这个线，

• 如图，下图中圈中的红色线条就是

  
  hightchart

设置线状图的线的宽度

plotOptions: {
     series: {
        lineWidth:20
    }
}

如下图效果

加宽线条

---

实现“油炸圈”图表：

• 参考链接：http://jsfiddle.net/jason_pandy/41wkq806/
• 关键属性设置：
• startAngle: -180,
• endAngle: 180,
• center: ['50%', '50%']//设置位置

注：一圈是360°，上述两个属性startAngle和endAngle只要和是360°就能出一个圈，center属性是设置位置。

---

如何隐藏右下角的网址

参考链接：
http://jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/credits/enabled-false/

• 关键属性：credits

---

图例legend的设置

• 隐藏
• 设置legend的enabled为false即可
• 设置图例样式

    legend: {
        layout: 'vertical',//设置图例是纵向显示
        floating: true,
        align: 'left',
        verticalAlign: 'top',
        x: 90,//定位设置
        y: 60,
        symbolPadding: 10,//设置图例和描述之间的距离
        symbolWidth: 50//设置图例中穿过圆形的线条长度
    },

如下图：

图例示意图

设置线状图的图例为圆点

如图:

圆形图例

相关代码

legend: {
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    borderWidth: 0,
    symbolWidth: 0,
    symbolPadding: 12,//图例图表和描述之间的距离
    itemDistance: 30,//每个图例之间的距离
    itemStyle: {
        color:'#707070'
    }
}

//……

series: [
        {
            name: helper.getIMsg('UAlarmLevelLabel.High'),
            color: '#ee3124',
            data: [],
            marker: {//如果不设置marker，每个图例的形状是自动随机生成的，有圆的有方的，样式不统一
                symbol: "circle",//设置图例形状
                lineWidth: 3,//设置图例的大小
                fillColor: '#ee3124',//图例外围的颜色
                lineColor:'#ee3124'//图例中心的颜色
            }
        }, {
            name: helper.getIMsg('UAlarmLevelLabel.Medium'),
            color: '#f37021',
            data: [],
            marker: {
                symbol: "circle",
                lineWidth: 3,
                fillColor: '#f37021',
                lineColor:'#f37021'
            }
        }, {
            name: helper.getIMsg('UAlarmLevelLabel.Low'),
            color: '#ffc627',
            data: [],
            marker: {
                symbol: "circle",
                lineWidth: 3,
                fillColor: '#ffc627',
                lineColor:'#ffc627'
            }
        }
        ]

bubble chart使用记录

参考链接：https://jsfiddle.net/jason_pandy/0zf5dgzm/

• 该例子实现了以下几个功能：

1. 横纵坐标自定义显示
2. 纵坐标的文字纵向显示
3. 设置图表颜色的透明度，可以通过rgba的方式设置
   color:rgba(255,113,242,100)

设置横轴纵轴最小刻度间隔

• 设置minTickInterval属性

yAxis: {
                    title: {
                        text: ''
                    },
                    minTickInterval:1,
         }

坐标上不显示小数

yAxis: {
                    title: {
                        text: ''
                    },
                    minTickInterval:1,
                    allowDecimals:false,
         }

设置坐标轴上文字两边的竖线长度 tickLength

xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            tickLength: 20
        },

• 效果图

tickLength:20

xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            tickLength: 200
        },

tickLength:200

显示纵坐标刻度线和纵坐标左边的竖线

                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    },
                    gridLineWidth:0, 
                    lineColor：'red',
                    lineWidth:1,//左边的竖线
                }

设置柱状图的宽度

$("#pie").highcharts({
    plotOptions: {
        column: {
            pointWidth:20 
        }
    }
});

柱状图上显示数字

下面的代码通过formatter来设置柱状图上显示各个成分的值，及total的值，以及为0时不显示。

yAxis: {
        stackLabels: {
            style: {
                color: 'black'
            },
            enabled: true,
            formatter: function () {
               if(this.total==0){
               return '';
               }
                return this.total + " mm";
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0,
            dataLabels: {
                enabled: true,
                formatter(){
                  if(this.y==0){
                  return ''
                  }
                return this.y;
                }
            }
        }
    }

图例的设置

 legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical'
},

隐藏右上角的导出打印区域

exporting: {
    enabled: false
}

---

最后附上官方网址：http://www.highcharts.com/

以后会持续更新中……