Apexcharts - Horizontal BoxPlot Chart 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Horizontal BoxPlot Chart</title>
</head>

<body>
<div id="chart"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/apexcharts/3.35.0/apexcharts.min.js"></script>
</body>
</html>

CSS

#chart {
    max-width: 650px;
    margin: 35px auto;
}

JavaScript

var options = {
  series: [
  {
    data: [
      {
        x: 'Category A',
        y: [54, 66, 69, 75, 88]
      },
      {
        x: 'Category B',
        y: [43, 65, 69, 76, 81]
      },
      {
        x: 'Category C',
        y: [31, 39, 45, 51, 59]
      },
      {
        x: 'Category D',
        y: [39, 46, 55, 65, 71]
      },
      {
        x: 'Category E',
        y: [29, 31, 35, 39, 44]
      },
      {
        x: 'Category F',
        y: [41, 49, 58, 61, 67]
      },
      {
        x: 'Category G',
        y: [54, 59, 66, 71, 88]
      }
    ]
  }
],
  chart: {
  type: 'boxPlot',
  height: 350
},
title: {
  text: 'Horizontal BoxPlot Chart',
  align: 'left'
},
plotOptions: {
  bar: {
    horizontal: true,
    barHeight: '50%'
  },
  boxPlot: {
    colors: {
      upper: '#e9ecef',
      lower: '#f8f9fa'
    }
  }
},
stroke: {
  colors: ['#6c757d']
}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();