ApexCharts实现一个拖动选择月份曲线图表效果代码-html代码-BFW代码库

ApexCharts实现一个拖动选择月份曲线图表效果代码

代码语言：html

所属分类：图表

代码描述：ApexCharts实现一个拖动选择月份曲线图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title>

<style>
body {
  background: #000524;
}

#wrapper {
  padding-top: 20px;
  background: #000524;
  border: 1px solid #000;
  box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.71);
  max-width: 650px;
  margin: 35px auto;
}

#chart-bar {
  position: relative;
  margin-top: -38px;
}
</style>

</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/apexcharts.js"></script>

<div id="wrapper">
  <div id="chart-area">

  </div>
  <div id="chart-bar">

  </div>
</div>

<script>
var data = generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
  min: 30,
  max: 90
});
var options1 = {
  chart: {
    id: "chart2",
    type: "area",
    height: 230,
    foreColor: "#ccc",
    toolbar: {
      autoSelected: "pan",
      show: false
    }
  },
  colors: ["#00BAEC"],
  stroke: {
    width: 3
  },
  grid: {
    borderColor: "#555",
    yaxis: {
      lines: {
        show: false
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  fill: {
    gradient: {
      enabled: true,
      opacityFrom: 0.55,
      opacityTo: 0
    }
  },
  markers: {
    size: 5,
    colors: ["#000524"],
    strokeColor: "#00BAEC",
    strokeWidth: 3
  },
  series: [.........完整代码请登录后点击上方下载按钮下载查看