Apexcharts - Paired Values (timestamps) Series Chart 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Paired Values (timestamps) Series 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 = {
  chart: {
    height: 380,
    width: "100%",
    type: "area",
    animations: {
      initialAnimation: {
        enabled: false
      }
    }
  },
  series: [
    {
      name: "Series 1",
      data: [
        [1486684800000, 34], 
        [1486771200000, 43], 
        [1486857600000, 31] , 
        [1486944000000, 43], 
        [1487030400000, 33], 
        [1487116800000, 52]
      ]
    }
  ],
  xaxis: {
    type: 'datetime'
  }
};

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

chart.render();