D3 二维图表的绘制系列（二十六）盒须图

上一篇： 中国地图

下一篇： 日历热力图

代码结构和初始化画布的Chart对象介绍，请先看 这里

本图完整的源码地址：这里

1 图表效果

2 数据

{
   
   
  "data": [
    {
   
   
      "name": "组1",
      "values": [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960]
    },
    {
   
   
      "name": "组2",
      "values": [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800]
    },
    {
   
   
      "name": "组3",
      "values": [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840]
    },
    {
   
   
      "name": "组4",
      "values": [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780]
    },
    {
   
   
      "name": "组5",
      "values": [890, 840, 780, 810, 860, 810, 790, 810, 820, 850, 870, 970, 810, 740, 810, 940, 950, 800, 890, 870]
    }
  ]
}

3 关键代码

导入数据

d3.json('./data.json').then(function(data){
   
   
.....

一些颜色样式配置

const config = {
   
   
        barPadding: 0.4,
        barStroke: 'red',
        margins: {
   
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        gridColor: 'gray',
        tickShowGrid: [200,400,600,800,1000],
        title: '基础盒须图'
    }

数据处理，计算每组数据的中位数、上下四分位数以及最大最小值