如何使用Js HighCharts图表插件
1个回答
展开全部
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>渠道流量统计</title>
<style type="text/css">
body {margin: 0; padding: 0;}
</style>
<!--引入jquery插件-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--引入highchart插件-->
<script src="highcharts.js" type="text/javascript"></script>
<!--引入highchart主题-->
<script src="grid.js" type="text/javascript"></script>
<!--调用数据，生成chart-->
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: { //整体控制
renderTo: 'container', //图表容器的DIVbar:横向条形图
defaultSeriesType: 'line', //可选，默认为line【line:折线;spline:平滑的线;area:区域图;bar:曲线图;pie:饼图;scatter:点状图等等;
marginRight: 130, //外边距控制 (上下左右空隙)
marginBottom: 25 //外边距控制
},
title: {
text: '渠道流量统计', //主标题
x: -20 //标题相对位置 默认居中
},
subtitle: {
text: '趋势图',//副标题
x: 60 //标题相对位置
},
xAxis: { //x轴数据
categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
},
yAxis: { //y轴数据
title: {
text: '标量'
},
plotLines: [{ //标线
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: { //数据点的提示框
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
} //formatter需要一个回调函数，可以通过this关键字打点得到当前一些图表信息
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{ //数据数组,json格式中name为这组数据的名字，data为这组数据的数组
name: '渠道一',
data: [2,7,9,25,31,32,9]
}, {
name: '渠道二',
data: [6,14,19,23,25,32,12]
}, {
name: '渠道三',
data: [7,16,17,20,25,26,4]
}, {
name: '渠道四',
data: [7,16,18,24,28,29,6]
}, {
name: '渠道五',
data: [9, 10, 12, 16, 18, 32, 15]
}]
});
});
</script>
</head>
<body>
<!-- 装载图表的容器 -->
<div id="container" style="width: 100%; height: 600px">
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>渠道流量统计</title>
<style type="text/css">
body {margin: 0; padding: 0;}
</style>
<!--引入jquery插件-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--引入highchart插件-->
<script src="highcharts.js" type="text/javascript"></script>
<!--引入highchart主题-->
<script src="grid.js" type="text/javascript"></script>
<!--调用数据，生成chart-->
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: { //整体控制
renderTo: 'container', //图表容器的DIVbar:横向条形图
defaultSeriesType: 'line', //可选，默认为line【line:折线;spline:平滑的线;area:区域图;bar:曲线图;pie:饼图;scatter:点状图等等;
marginRight: 130, //外边距控制 (上下左右空隙)
marginBottom: 25 //外边距控制
},
title: {
text: '渠道流量统计', //主标题
x: -20 //标题相对位置 默认居中
},
subtitle: {
text: '趋势图',//副标题
x: 60 //标题相对位置
},
xAxis: { //x轴数据
categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
},
yAxis: { //y轴数据
title: {
text: '标量'
},
plotLines: [{ //标线
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: { //数据点的提示框
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
} //formatter需要一个回调函数，可以通过this关键字打点得到当前一些图表信息
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{ //数据数组,json格式中name为这组数据的名字，data为这组数据的数组
name: '渠道一',
data: [2,7,9,25,31,32,9]
}, {
name: '渠道二',
data: [6,14,19,23,25,32,12]
}, {
name: '渠道三',
data: [7,16,17,20,25,26,4]
}, {
name: '渠道四',
data: [7,16,18,24,28,29,6]
}, {
name: '渠道五',
data: [9, 10, 12, 16, 18, 32, 15]
}]
});
});
</script>
</head>
<body>
<!-- 装载图表的容器 -->
<div id="container" style="width: 100%; height: 600px">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
