Highcharts

HighCharts -教程+例子

浪尽此生 提交于 2020-01-01 21:33:50
Highchart简介: Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表, Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 ! Highcharts功能强大,图表种类多也很漂亮,高度自定义,兼容性比较好。具体参考: http://www.hcharts.cn/docs/index.php?doc=start-introduction 使用准备: 1.在官网上找到下载链接即可,其中有3个下载项,highchart为主要的, 后面两个,highmaps是主题为地图的一些图表。highstock是主题为股票的一些折线图,是一些行业定制化的工具 2.使用highchart需要两个文件一个是基础的jquery(jquery建议1.8.2版本)或者prototype等js框架,以及highcharts.js。可以在线引用,但是可能不太稳定,建议本地引用。 需要在移动端使用的时候,考虑这个。另外图表导出等高级功能,需要额外引入exporting.js 等文件。 HelloWorld 1.创建div容器,图表将在这个容器里画出来,需要制定id,style长宽样式需要制定。 <div id="container" style=

HighCharts使用心得

陌路散爱 提交于 2020-01-01 21:30:39
前言: 之前非常早的一个项目中使用过highcharts。感觉挺方便的,图表类型也比較丰富。并且还支持数据的下钻,可是假设投入商业使用的话还会有一些版权的问题,所以后来就使用了EChart。这是百度开发的一个开源的图表插件。图表类型也非常丰富。并且还有交互,对地图的支持也非常好,可以免费的使用。在之前的一篇文章里,已经总结过了,今天主要跟大家分享一下,之前总结的Highcharts的一些使用心得。希望可以对大家有所帮助。 1. 准备工作------下载HighCharts插件 跟ECharts一样。HighCharts也须要下载对应的插件,只是HightCharts的插件非常easy,仅仅有一个highcharts.js文件。 能够从HighCharts官网上下载。详细地址例如以下: http://www.highcharts.com/download 另注: 假设须要导出图表。则须要exporting.js文件 假设须要一些特殊的图形呈现,则还须要下载highcharts-more.js 2. 新建一个解决方式或站点,引用下载的highcharts.js文件,进行图表展示。 在这个过程中,我会逐步的跟大家解说怎样使用highcharts.js进行图表展示。 2.1 新建解决方式(或站点),文件夹结构例如以下 另注: 普通情况下假设不须要导出图片、且仅仅使用常规的图形

HighCharts使用心得

拈花ヽ惹草 提交于 2020-01-01 21:30:11
前言: 之前很早的一个项目中使用过highcharts,感觉挺方便的,图表类型也比较丰富,而且还支持数据的下钻,但是如果投入商业使用的话还会有一些 版权的问题,所以后来就使用了EChart,这是百度开发的一个开源的图表插件,图表类型也很丰富,而且还有交互,对地图的支持也很好,可以免费的使用。 在之前的一篇文章里,已经总结过了,今天主要跟大家分享一下,之前总结的Highcharts的一些使用心得,希望能够对大家有所帮助。 1. 准备工作------下载HighCharts插件 跟ECharts一样,HighCharts也需要下载相应的插件,不过HightCharts的插件很简单,只有一个highcharts.js文件。可以从HighCharts官网上下载,具体地址如下: http://www.highcharts.com/download 另注: 如果需要导出图表,则需要exporting.js文件 如果需要一些特殊的图形呈现,则还需要下载highcharts-more.js 2. 新建一个解决方案或网站,引用下载的highcharts.js文件,进行图表展示。 在这个过程中,我会逐步的跟大家讲解如何使用highcharts.js进行图表展示。 2.1 新建解决方案(或网站),目录结构如下 另注: 一般情况下如果不需要导出图片、且只使用常规的图形,exportting

HighCharts使用心得

主宰稳场 提交于 2020-01-01 21:29:41
HighCharts使用心得 前言: 之前非常早的一个项目中使用过highcharts,感觉挺方便的。图表类型也比較丰富,并且还支持数据的下钻,可是假设投入商业使用的话还会有一些版权的问题,所以后来就使用了EChart,这是百度开发的一个开源的图表插件。图表类型也非常丰富,并且还有交互。对地图的支持也非常好,能够免费的使用。在之前的一篇文章里。已经总结过了。今天主要跟大家分享一下,之前总结的Highcharts的一些使用心得,希望能够对大家有所帮助。 1. 准备工作------下载HighCharts插件 跟ECharts一样,HighCharts也须要下载对应的插件,只是HightCharts的插件非常easy,仅仅有一个highcharts.js文件。 能够从HighCharts官网上下载,详细地址例如以下: http://www.highcharts.com/download 另注: 假设须要导出图表,则须要exporting.js文件 假设须要一些特殊的图形呈现。则还须要下载highcharts-more.js 2. 新建一个解决方式或站点。引用下载的highcharts.js文件。进行图表展示。 在这个过程中,我会逐步的跟大家解说怎样使用highcharts.js进行图表展示。 2.1 新建解决方式(或站点)。文件夹结构例如以下 另注: 普通情况下假设不须要导出图片

Exporting several HighCharts graphs to Powerpoint slides

你离开我真会死。 提交于 2020-01-01 19:56:15
问题 we are planning to build a Angular based web application which has about 15-20 different charts rendered using HighCharts. The requirement is to export those charts into PPT slides. I know that HighCharts provides an export to image option. We can then embed that image in a PPT slide. We are planning to use Ruby and we have a ruby gem which does that. (We are not restricted to Ruby though, and there is one Node module which does the embed-image-in-ppt as well). Now the challenge is - the

How to extract the data from highstock chart

♀尐吖头ヾ 提交于 2020-01-01 18:19:15
问题 Assume that I have a sample highstock chart like this in the website. I was wondering whether it is possible to extract the data from the chart alone (i.e. chart is created by the third person and the data used for the chart is not accessible to others). <img src="http://www.highcharts.com/stock/demo/basic-line"> 回答1: Yep. Each chart is stored within HighChart's Highcharts.charts array. On the page you've linked that currently contains the one chart: Highcharts.charts -> [ z.Chart ] This is

touch event support in highchart for iphone/ipads or any touchable devices

南笙酒味 提交于 2020-01-01 16:31:31
问题 I have a requirement where user is able to draw/add series,indicators,lines on highcharts both by click and touch events. Here is the link http://www.highcharts.com/documentation/compatibility The touch events are not directly supported by highcharts api. May I get any suggestions? 回答1: And I figure it out by myself. If you need the touch events support in highcharts then, here is the code. Highcharts.Chart.prototype.callbacks.push(function(chart) { var hasTouch = hasTouch = document

Highcharts not displaying data at some zoom levels

一笑奈何 提交于 2020-01-01 09:40:34
问题 I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...] . The dates are always 1 hour apart and there are no gaps in the data. When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays

Disable series through configuration in highcharts

戏子无情 提交于 2020-01-01 08:52:48
问题 I have a line chart with several series. When viewed all at once the chart is confusing, so I would like to have certain series hidden initially. I know I can programmatically turn off series, but is there a way to do this when initializing the chart? 回答1: Believe there is a configuration option for this. Within Series, set "visible = false" The legend will still list the series but greyed out. And the series itself will be hidden in the chart upon initial display. Example configuration:

Disable series through configuration in highcharts

天大地大妈咪最大 提交于 2020-01-01 08:50:07
问题 I have a line chart with several series. When viewed all at once the chart is confusing, so I would like to have certain series hidden initially. I know I can programmatically turn off series, but is there a way to do this when initializing the chart? 回答1: Believe there is a configuration option for this. Within Series, set "visible = false" The legend will still list the series but greyed out. And the series itself will be hidden in the chart upon initial display. Example configuration: