如何用 highcharts 画柱状图, 多柱子叠加, 提示框, 以及柱子高度标识

怼烎@ 2022-04-02 07:14 323阅读 0赞

### 如何用 highcharts 画柱状图, 多柱子叠加, 提示框, 以及柱子高度标识 ###

*  使用场景
 *  部分属性解释
 *   *  xAxis
     *  yAxis
     *  series
     *  title
     *  subtitle
     *  tooltip
     *  legend
     *  plotOptions
     *  exporting
 *  关键代码
 *   *  叠加柱子
     *  标记柱子长度
 *  源代码
 *   *  整图参考
     *  js代码

# 使用场景 #

需求是图表表达每日睡眠的各时间段占比(深睡, 潜睡, 清醒), 并将不同日期进行横向比较

针对这种类似的场景, 用叠加柱状图正好, 既能够体现出每天睡眠时长的变动情况, 也能够直观的反映出每天的各种睡眠阶段的占比情况

# 部分属性解释 #

## xAxis ##

x轴: 数据内容, 如日期, 用户, 分组名称等  
注意: 这个长度应该要和`series.data`中的数据长度对应的

## yAxis ##

y轴: 就是柱子高度的含义, 在这里是时长

## series ##

*  `在这里(`series.data\`)放柱子的长度信息  
    例如:

series: [{ 
        name: '深睡时长',
        data: [200, 230, 400, 190, 230]
      }

## title ##

标题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjA4ODQ0_size_16_color_FFFFFF_t_70]

## subtitle ##

副标题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjA4ODQ0_size_16_color_FFFFFF_t_70 1]

## tooltip ##

提示工具, 就是鼠标移动过去弹出的那个框, 这里可以使用`html`来处理样式  
例如:

tooltip: { 
 pointFormat: '{series.name}: {point.y}分钟 ({point.percentage:.0f}%) ',
 shared: true
 }

![在这里插入图片描述][20181225180920329.png]

## legend ##

图例说明, 说明每个颜色的柱子表达的是什么, 一般在图标的上部, 下部, 或者右上角

![在这里插入图片描述][20181225175853107.png]

## plotOptions ##

图例选项, 我们这里是柱状图, 主要关注`plotOptions.column`就ok了, 这里主要是给柱子一些标识, 或者了一些功能等  
例如:

plotOptions: { 
    column: { 
    stacking: '时间',
    dataLabels: { 
    	enabled: true,
    		color: '#4f4f4f',
    		style: { 
    		fontWeight:'normal',
    		fontSize: '12px',
    		"textShadow": 'none'
    	}
    }
    }
    }

## exporting ##

输出, 打印相关  
`exporting.enabled`用来设置是否显示‘打印’,'导出’等功能按钮，不设置时默认为显示

exporting:{ 
      enabled:false
    }

# 关键代码 #

## 叠加柱子 ##

plotOptions: { 
    	column: { 
    	stacking: '时间'
    	}
    }

## 标记柱子长度 ##

plotOptions: { 
      column: { 
        dataLabels: { 
          enabled: true
        }
      }
    }

# 源代码 #

> 代码说明: 里面的数据是动态的, 从后台拿的, 需要根据自己的情况做修改  
> 这里列出一些需要修改的地方
> 
> 1.  x轴`xAxisCategories`
> 2.  y轴名称`yAxisSuffix`
> 3.  标题`title`
> 4.  副标题`subTitle`
> 5.  `tooltip`中的提示内容
> 6.  柱子的数据`series`

## 整图参考 ##

柱子颜色可自己定义  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjA4ODQ0_size_16_color_FFFFFF_t_70 2]

## js代码 ##

$('#'+containerId).highcharts({ 
 chart: { 
 height:charHeight,
 type: 'column'
 },title: { 
 text: title,
 x:-20
 },
 subtitle: { 
 text: subTitle,
 x: -20
 },
 xAxis: { 
 categories: xAxisCategories,
 tickInterval: step
 },
 yAxis: { 
 title: { 
 text: yAxisSuffix,
 style: { 
 color: "#4d759e",
 fontWeight: "normal",
 fill: "#4d759e"
 }
 },
 //plotLines: plotLines
 },
 legend: { 
 enabled: true,
 useHTML: true,
 layout: 'vertical',
 backgroundColor: '#FFFFFF',
 align: 'right',
 verticalAlign: 'top',
 floating: true,
 x: 0,
 y: -10
 },
 credits: { 
 text: '', // 设置LOGO区文字
 href: '' // 设置LOGO链接地址
 },
 exporting:{ 
 enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
 },
 plotOptions: { 
 column: { 
 stacking: '时间',
 dataLabels: { 
 enabled: true,
 color: '#4f4f4f',
 style: { 
 fontWeight:'normal',
 fontSize: '12px',
 "textShadow": 'none'
 }
 }
 },
 series: { 
 marker: { 
 enabled: true,
 states: { 
 hover: { 
 enabled: true
 }
 }
 },
 //控制图标的图例legend不允许切换
 events: { 
 legendItemClick: function (event) { 
 return false;
 }
 }
 }
 },
 tooltip: { 
 //shared: true,
 crosshairs: true,
 valueSuffix: yAxisSuffix,
 useHTML: true,
 formatter: function() { 
 return "<div style='width:300px;word-wrap:break-word;white-space:normal;'>"
 +"录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+" "
 +tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+" "
 +tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+" "
 +tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+" "
 +tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+" "
 +"</div>";
 }
 },
 series: [
 
 { 
 name: attrs[1],
 data: dataBean['areaDatas'][1],
 marker: { 
 fillColor: 'white',
 lineWidth: 1,
 lineColor: Highcharts.getOptions().colors[1]
 }
 },{ 
 name: attrs[2],
 data: dataBean['areaDatas'][2],
 marker: { 
 fillColor: 'white',
 lineWidth: 1,
 lineColor: Highcharts.getOptions().colors[2]
 
 }
 },{ 
 name: attrs[3],
 data: dataBean['areaDatas'][3],
 marker: { 
 fillColor: 'white',
 lineWidth: 1,
 lineColor: Highcharts.getOptions().colors[3]
 }
 }
 ]
 });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjA4ODQ0_size_16_color_FFFFFF_t_70]: /images/20220402/1d0e9bc3bcc14b80837a19ef72e60826.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjA4ODQ0_size_16_color_FFFFFF_t_70 1]: /images/20220402/268fc7ff97934c25a9cab46214811e1f.png
[20181225180920329.png]: /images/20220402/abd1b846190b416ea5c00ffd678cd1a6.png
[20181225175853107.png]: /images/20220402/124f63342ab94692b7e4c2e3a638b621.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjA4ODQ0_size_16_color_FFFFFF_t_70 2]: /images/20220402/a8074f6f6f2842bc915d0c241b547ada.png