ApexCharts使用示例 -- 多图表同时执行交互操作

最新推荐文章于 2024-05-28 10:15:47 发布

是阿洋啊

最新推荐文章于 2024-05-28 10:15:47 发布

阅读量6.3k

点赞数 3

分类专栏：前端文章标签： javascript 数据可视化 js 前端

本文链接：https://blog.csdn.net/semian7633/article/details/104675142

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ApexCharts使用示例 – 多图表同时执行交互操作

一、引入apexcharts.js

 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 或
 <script src="../apexcharts.js"></script>

二、HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>Syncing charts 同步图表</title>
	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
	<div style="width:1000px;margin:0 auto">
		<div id="charts1"></div>
		<div id="charts2"></div>
		<div id="charts3"></div>
		<div id="charts4"></div>
	</div>
</body>
</html>

三、JavaScript代码

Part 1

// 定义一个全局的ApexCharts样式，
// 包括高度、右上角的工具、X轴、Y轴、提示工具、折线图样式、网格等
Apex = { 
	chart: {
		height: 160,
		toolbar:{
			show:false
		}
	},
	dataLabels: {
		enabled: false
	},
	toolbar: {
		tools: {
			selection: true
		}
	},
	tooltip: {
		followCursor: false,
		theme: 'light',
		x: {
			show: true
		},
		marker: {
			show: true
		},
		y: {
			show:true,
		}
	},
	stroke: {
		curve: 'smooth',
	},
	grid: {
		clipMarkers: true
	},
	yaxis: {
		tickAmount: 2
	},
	xaxis: {
		type: 'datetime'
	},
}

Part 2

// 定义一个模拟数据的方法，这个是ApexCharts官网的方法
function generateDayWiseTimeSeries(baseval, count, yrange) { 
    	var i = 0;
    	var series = [];
    	while (i < count) {
    		var x = baseval;
    		var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    		series.push([x, y]);
    		baseval += 86400000;
    		i++;
    	}
    	return series;
    }

Part 3

// 定义第一个折线图，包含多条曲线
var options = {
   	series: [{
   		name:"氧气1",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	},
   	{
   		name:"氧气12",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	},
   	{
   		name:"氧气13",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	}],
   	chart: {
	   	id:"a",// 创建图表组时，应该为每个图表添加一个id
   		group: 'social', // 如果想要创建一个图表组来同时执行交互操作，那么这些图表应该属于同一个组，就需要在这里的group中填写所属分组
   		type: 'line',
   		height: 200
   	},
   	colors: ['#008FaB',"#abcdef","#124567"],
   	yaxis: {
   		labels: {
   			minWidth: 40
   		}
   	},
   	xaxis: {
   		type: 'datetime'
   	},
   };

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

   var optionsLine2 = {
   	series: [{
   		name:"风速啊",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 30
   		})
   	},
   	{
   		name:"风速啊哈",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	},
   	{
   		name:"风速啊喂",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	}],
   	chart: {
   		id: 'tw',
   		group: 'ss',
   		type: 'line',
   		height: 200
   	},
   	colors: ['#008FaB',"#abcdef","#124567"],
   	yaxis: {
   		labels: {
   			minWidth: 40
   		}
   	},
   	xaxis: {
   		type: 'datetime'
   	},
   };

   var chartLine2 = new ApexCharts(document.querySelector("#charts2"), optionsLine2);
   chartLine2.render();

   var optionsArea = {
   	series: [{
   		name:"甲烷嘭",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	},
   	{
   		name:"甲烷嘭嘭",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	},
   	{
   		name:"甲烷嘭嘭嘭",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 10,
   			max: 60
   		})
   	}],
   	chart: {
   		id: 'yt',
   		group: 'social',
   		type: 'line',
   		height: 200
   	},
   	colors: ['#008FaB',"#abcdef","#124567"],
   	yaxis: {
   		labels: {
   			minWidth: 40
   		}
   	},
   	xaxis: {
   		type: 'datetime'
   	},
   };

   var chartArea = new ApexCharts(document.querySelector("#charts3"), optionsArea);
   chartArea.render();

   var optionsStep = {
   	series: [{
   		name:"电机6",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 0,
   			max: 1
   		})
   	},
   	{
   		name:"电机66",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 0,
   			max: 1
   		})
   	},
   	{
   		name:"电机666",
   		data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
   			min: 0,
   			max: 1
   		})
   	}],
   	chart: {
   		id: 'aa',
   		group: 'ss',
   		type: 'line',
   		height: 200
   	},
   	stroke: {
   		curve: 'stepline',
   	},
   	colors: ['#008FaB',"#abcdef","#124567"],
   	yaxis: {
   		labels: {
   			minWidth: 40
   		}
   	},
   	xaxis: {
   		type: 'datetime'
   	},
   };
   
var stepLines = new ApexCharts(document.querySelector("#charts4"), optionsStep);
stepLines.render();

四、效果

在这里插入图片描述
鼠标放在第一个图表或者第三个图表时的效果：

数据标签的效果：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200302161132505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlbWlhbjc2MzM=,size_16,color_FFFFFF,t_70)
鼠标放在第二个图表或者第四个图表时的效果：

是阿洋啊

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ApexCharts使用示例 -- 多图表同时执行交互操作

ApexCharts使用示例 – 多图表同时执行交互操作一、引入apexcharts.js <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> 或 <script src="../apexcharts.js"></script>二、HTML代码<!DOCT...
复制链接

扫一扫