HighCharts之2D带Label的折线图

最新推荐文章于 2020-11-30 16:11:43 发布
最新推荐文章于 2020-11-30 16:11:43 发布
阅读量96 收藏
点赞数
文章标签： javascript ViewUI

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、运行结果


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Highcharts之自定义标签
学会改变自己——才能突破
08-29 1万+
前边有看过FusionChartsFree(Flash+JS+XML三项技术结合来显示图表：柱状图，折线图，饼图等等),JFreeChart(利用Java语言来实现的各种图形的展示)。而这篇博客我们来看另一种图表显示工具Highcharts(纯粹利用JS来实现各种图表的展示)。         看一张官网上的图片：          通过这张图，来简单介绍一下Highcharts可以实现的功能，或
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
10-20
在本示例中，我们将重点讨论如何使用jQuery插件HighCharts来绘制2D带Label的折线图。 首先，为了使用HighCharts，我们需要引入jQuery库以及HighCharts的JavaScript文件。在HTML的`<head>`标签内，可以看到引入了`...
HighChart开发笔记--标示线plotLines的label标签不显示
u013025674的博客
03-01 2594
今天被经理告知用HighChar插件来显示测点数据历史曲线的功能出了个小bug：标示线plotLines的label标签不显示。这个项目已经上线了几个月，之前都是没问题的，再三确认无人动过这处代码后，便自己打开highchart的官方API页面开始研究了。 这是我关于plotLine标示线的配置代码 这是页面效果： ...
Threejs官例解析，标签&css2dlabel（一）
映月潜的博客
01-16 6295
最近需要给自个儿项目的模型加上标签，来显示一些有的没的的数据。 去例子萌里瞄了一眼，发现了css2dlabel 这个例子。 远瞅是这样的！其实近瞅也这样，这个顶着一个moon的月亮会绕着这个地球一直旋转，上面的标签也会和他一起移动。（我总感觉应该顶一个奋斗当标签） 闲言少叙，来看看咋用的。 调用篇 拿月球举例子吧 生成球。这个瞄一眼应该不会有太大的问题。 shininess。默认是30，看起来会有...
使用highcharts【案例3D饼图】
weixin_43837268的博客
01-10 1091
1.安装vue-highcharts和highcharts， npm install vue-highcharts --save npm install highcharts --save 2.option.js let all={ pie:{ chart: { type: 'pie', options3d: ...
Highcharts 学习笔记2-折线图（动态显示数据）
qq_44656336的博客
11-30 1339
接上上次的学习，这次学习的内容是如何动态的显示数据。 目录一、学习动态显示数据前的准备工作二、如何建立长连接，来实现前后端通信。1. 编写一个 WebSocket 的配置2. 编写一个 WebSocket 用来处理连接3. 前端建立连接三、前端展示实时数据 一、学习动态显示数据前的准备工作 在正式说到如何显示前，我们需要知道，我们大概要如何来动态显示数据。 要动态的显示数据，那么我们后台一旦有数据变化，我们就需要响应给前端一个信号。 前端根据信号，更新数据，或者重新查询数据等。 涉及的知识点：Web.
jquery折线统计图
06-09
接着，我们引入一个用于绘制折线图的插件，如Chart.js、Highcharts或Flot等。这些插件提供了丰富的自定义选项和良好的兼容性。这里假设我们使用的是Chart.js，一个轻量级且易于上手的图表库。 在`index.html`文件中...
js做折线图
06-25
在JavaScript中创建折线图是数据可视化的基本需求之一，它可以帮助我们直观地展示时间序列数据、趋势变化等信息。本文将深入探讨如何使用JavaScript来实现折线图，并提供相关的资源和示例。 1. **基础概念** 折线...
ASP网页中呈现折线图
08-24
要呈现折线图，我们通常会利用JavaScript库，如Chart.js、Highcharts或D3.js。这些库提供了丰富的API和易于使用的接口来创建各种图表，包括折线图。例如，我们可以选择Chart.js，一个轻量级且功能强大的JavaScript库...
【HighCharts系列教程】八、Html标签属性——Labels
weixin_34417183的博客
01-27 375
一、labels属性说明 Labels属性允许在HighCharts图表的任意位置添加任意的html代码。可以实现许多自定义内容。 二、labels属性详解   参数子参数说明默认值 items —- 一个html标签 —- —- html html代码 “” —- style 标签位置(只能是位置，其他css不行) style: {le...
【HighCharts系列教程】十、图例属性——legend
weixin_34124577的博客
01-27 1141
一、legend属性说明 Legend是HighCharts图表的图例属性，如图 默认情况下，HighCharts都会有图例，无特殊情况，默认即可满足需求，所以一般不用配置Legend属性。 二、lang属性详解 参数说明默认值 labelFormatter 显示函数，主要是调用该数据列的名字 labelFormatter: function() {return th...
highcharts中的x轴如何显示时分秒时间格式
祈澈菇凉
08-22 2043
上一篇文章写道：三分钟上手Highcharts简易甘特图：https://www.jianshu.com/p/d669d451711b，在官方文档里面，x轴默认为年月日。 在项目需求中，x轴要表示24小时之内的状态，不可以使用年月日坐标轴，需要使用时分秒，那么highcharts 怎么设置x轴时间格式？这个问题卡了好久，因为网上没有找到合适的方案，关于Hi...
echart的折线图label不显示解决方案
taozi550185271的专栏
10-20 4985
问题现象描述：折线图设置label的show值为true，但是label依然不显示，如下图： 排查步骤： 1、检查symbol是否设置为 symbol:'none', 或者是否 "symbolSize": 0, 解决方案： 如果出现上述排查步骤中所述情况，则对应注释掉symbol:'none',该行或改为 symbol:'circle', "symbolSize": 0.01, 改后效果如下图： ...
highcharts特殊定制：x轴文字竖直显示（兼容各浏览器）
Jump!Alang
11-08 8228
做项目要用到highchart画柱状图，可是x轴数据文字长度
关于highcharts显示数据时dataLabels存在阴影的问题
kirinlau的专栏
07-03 7400
hhighcharts是一款流行易配置的图表库，不过在使用中依然会遇到一些问题，比如当显示图标中的item数据时，会出现以下这种文字阴影。 看起来体验貌似不好？尤其是大大屏幕上显示就更加没有辨识度了，因为使用者一眼注意到的是图表然后是数据，虽说有坐标轴，但这数据还得仔细辨认才是。 其实我们想要的是隔壁echarts这种… 这种：‘ 看了一下文档自己摸索了一下，试了几种方法均无效...
highcharts折线图
最新发布
08-17
根据您提供的引用内容，使用Highcharts库绘制折线图时遇到了问题。在设置最大值（max）时，发现数据中存在多个值同时为最大值，导致连接线只显示一半的情况。经过在Highcharts社区提问后，获得了解决方案。 您尝试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值