apexcharts - 创建第一个JavaScript图表示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>创建第一个JavaScript图表</title>
</head>

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

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

CSS

body {
  font-family: Roboto, sans-serif;
}

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

JavaScript

var options = {
    chart: {
        type: 'bar'
    },

    series: [{
        name: 'sales',
        data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
    }],

    xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
};

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

chart.render();