关于highcharts 多条曲线Y轴设置

xu871223 2013-03-28 09:15:17

各位大大，最近在使用highcharts遇到个难点，烦请各位大大帮忙出出注意

大概100个对象，每个对象有三个属性，利用三个属性的数据，绘制一张三条曲线图

A,B,C,三个数据描述如下：
A数据区间在0-3,维持在某一个值（这个值多少不固定，但是浮动基本固定，每秒零点几）。
B数据区间在0-350，维持在某一个值（这个值多少不固定，但是浮动基本固定，每秒个位数）。
C数据区间在0-100，维持在某一个值（这个值多少不固定，但是浮动基本固定，每秒个位数）。

我目前采用的是Y轴 0%-100% 10个百分比，采用的公式是：
A=(A/3)*100
B=(B/350)*100
C=(C/100)*100

但是由于每个数浮动很小，，，最后三条曲线基本变成了直线

有什么好办法，让曲线图好看些吗？

...全文

432 6 打赏收藏转发到动态举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

初心不变时过迁 2013-08-22

打赏
举报

回复

我也有试过多曲线、、虽然出来了但效果不理想、、

Hello World, 2013-08-20

打赏
举报

回复

可以设置多个Y轴,并设置最大最小值

大布丁 2013-08-20

打赏
举报

回复

不要设置Y轴最小值

xu871223 2013-03-28

打赏
举报

回复

自己顶上去，有大大来吗？

NULL 博文链接：https://747017186.iteye.com/blog/2196221

echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。核心代码 visualMap: { show: false, dimension: 1, pieces: [], //pieces的值由动态数据决定 outOfRange: { color: 'black' } //上面是按官方文档固定格式，主要是配置样式布局，实际的x轴和y轴数据可以通过ajax在后台取得 //x轴数据 var datax = ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月','10月']; //模拟动态数据 option.xAxis.data = datax; //y轴数据 var datay = [160, 280, 350, 500, 200, 250, 800, 600, 550, 200]; option.series[0].data = datay; //400以上,900以下显示成金色(gold) option.visualMap.pieces[0] = {gte: 400, lte: 900, color: 'gold'};

Highgantt 是用纯 JavaScript 编写的甘特图控件主要优势（功能特点） browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用，包括 iPhone，iPad 和 IE6 以上的版本。在 IOS 和 Android 系统中 Highstock 支持多点触摸功能，因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制，在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可，直接可以任意使用！商业网站或网站，请查看我们的使用协议及价格。 open开源 Highstock 最重要的特点之一就是：无论免费版还是付费版，你都可以下载源码并可以对其进行编辑。基于开源社区我们可以第一时间获取用户的需求、Bug 修复及吸收社区贡献。 no-backend纯 JavaScript Highstock 完全基于 HTML5 技术，不需要再客户端安装任何插件，如 Flash 或 Java。此外你也不用配置任何服务端环境，不需要 PHP、Tomcat、ASP.NET 等，只需要两个 JS 文件即可运行。 chart-types图表种类丰富 Highstock 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图（OHLC）、K线图、标签图、面积范围图、柱形范围图等多种图表，其中很多图表可以集成在同一个图形中形成混合图 config-syntax简单的配置语法在 Highstock 中设置配置选项不需要任何高级的编程技术，所有的配置都是 JSON 对象，只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写，同时也易于机器解析和生成的特点。动态交互性 Highstock 支持丰富交互性，在图表创建完毕后，可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。范围选择器在处理大数据集时，我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择器，方便的用它来选择预设范围的时间，例如 1个月、一季度、1年等，你可以通过时间输入框来选择自己想要查看数据范围。滚动条和导航器通过滚动条和导航器可以更加直观的操作和查看特定范围的数据。事件标记通过添加标志数据列可以为数据相关的事件做标记和注释。支持多坐标轴多个数据进行对比这是非常常见的需求，Highstock 可以让你为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。 tooltip数据提示框当鼠标划过图形时，Highstock 可以将数据点或数据列的信息展示在提示框中，并且提示框会跟随用户的鼠标；我们做了大量工作，可以智能的显示离鼠标最近的点或被遮盖点的信息。 datetime时间轴 Highstock 对时间轴的处理非常智能，可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 data grouping数据分组与合并如果数据集包含 10 万个，浏览器对每个点进行计算并渲染的话效率会非常低。Highstock 具有数据分类功能，可以以飞速的进行数据分组；放大至小范围的数据是会重新分组，因为你可以查看高度清晰的数据又不失效率和速度。 exporting导出和打印 Highstock 支持导出功能，用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件，通过插件可以实现导出为 Excel 文件功能；另外，用户还可以从网页上直接打印图表。 zooming缩放和平移除了通过滚动条或导航器控制放大和平移功能，你还可以通过鼠标和手指来进行这两个操作。 ajax方便加载外部数据 Highstock 的数据是 JavaScript 数组或对象，这些数据可以是本地的配置对象，独立的数据文件（JSON、CVS）甚至是不同的网站上定义。另外，这些数据可以用任何形式处理好并加载到 Highstock 中。

Highcharts是一个制作图表的纯Javascript类库，主要特性如下： • 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； • 对个人用户完全免费； • 纯JS，无BS； • 支持大部分的图表类型：柱状图，直线图，曲线图、区域图、区域曲线图、饼装图、散布图等； • 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库； • 提示功能：鼠标移动到图表的某一点上有提示信息； • 放大功能：选中图表部分放大，近距离观察图表； • 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表； • 时间轴：可以精确到毫秒； • Ajax支持：使用数组接受Ajax传值

有翻译的有自己整理的资料，是学习highchats的一个小字典吧，希望大家不断完善最后，能有个好点的版本

87,992

社区成员

224,685

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章