HighCharts之2D带Label的折线图
2024-08-24 12:16:01
HighCharts之2D带Label的折线图
1、HighCharts之2D带Label的折线图源码
LineLabel.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/js/highcharts.js"></script> <script type="text/javascript"> $(function(){ $('#lineLabelChart').highcharts({ chart: { type: 'line' }, title: { text: '统计某周水果销售情况' }, subtitle: { text: '水果销量' }, xAxis: { categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] }, yAxis: { title: { text: '单位(kg)' } }, tooltip: { enabled: false, formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'kg'; } }, plotOptions: { line: { dataLabels: { enabled: true, style: { textShadow: '0 0 3px white, 0 0 3px white', fontSize: '14px', color: '#0000FF', cursor: 'pointer' } }, enableMouseTracking: true } }, series: [{ name: '苹果', data: [98,25,69,45,15,78,67] }, { name: '橘子', data: [46,78,16,85,67,24,17] }, { name: '桃子', data: [19,54,74,18,34,90,34] }, { name: '梨子', data: [63,52,90,65,47,34,97] }, { name: '荔枝', data: [56,74,99,41,43,65,78] }] }); }); </script> </head> <body> <div id="lineLabelChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、运行结果
最新文章
- Android性能优化之利用LeakCanary检测内存泄漏及解决办法
- Newtonsoft.Json 把对象转换成json字符串
- [转]run for a girl
- Jquery数组操作
- 使用ssh免密码登录其他机器
- putty mtputty 设置utf8编码
- SSIS ->;>; Data Flow Design And Tuning
- ListView Web 服务器控件概述(MSDN)
- linux为命令取别名
- 数据画图 jpgraph &; chart.js
- ArcGIS for Silverlight 地图卷帘
- 关于maven相互依赖的工程部署问题
- Javascript中的this关键字用法详解
- css 实现多行文本末尾显示省略号
- Ubuntu 18.04安装Codeblocks
- 解决node-pre-gyp install --fallback-to-build 卡住不动
- 基于Python的卷积神经网络和特征提取
- 三:ZooKeeper的ZAB协议
- Thrift初试
- LeetCode154.寻找旋转排序数组中的最小值 II
热门文章
- c# 可变字符串 StringBuilder
- Linux(CentOS)挂载NTFS格式的U盘、移动硬盘
- 《Thinking in Java》学习笔记(二)
- Swing小技巧总结
- BZOJ 1370: [Baltic2003]Gang团伙 [并查集 拆点 | 种类并查集WA]
- POJ2318 TOYS[叉积 二分]
- 分享一下自己写的一个vscode-leetcode答题插件
- js小技巧:数组去重
- [Python Study Notes]Socket模拟ssh执行cmd并记录遇到的问题
- window.location的路径