Apexcharts - Basic BoxPlot Chart 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Basic 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: [
  {
    type: 'boxPlot',
    data: [
      {
        x: 'Jan 2015',
        y: [54, 66, 69, 75, 88]
      },
      {
        x: 'Jan 2016',
        y: [43, 65, 69, 76, 81]
      },
      {
        x: 'Jan 2017',
        y: [31, 39, 45, 51, 59]
      },
      {
        x: 'Jan 2018',
        y: [39, 46, 55, 65, 71]
      },
      {
        x: 'Jan 2019',
        y: [29, 31, 35, 39, 44]
      },
      {
        x: 'Jan 2020',
        y: [41, 49, 58, 61, 67]
      },
      {
        x: 'Jan 2021',
        y: [54, 59, 66, 71, 88]
      }
    ]
  }
],
  chart: {
  type: 'boxPlot',
  height: 350
},
title: {
  text: 'Basic BoxPlot Chart',
  align: 'left'
},
plotOptions: {
  boxPlot: {
    colors: {
      upper: '#5C4742',
      lower: '#A5978B'
    }
  }
}
};

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