HIGHCHARTS - 技术教程文章
HighCharts基本折线图【图】
1、设计源代码<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html><head><title>HighCharts基本折线图</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><script type="text/javascript" src="../js/jquery-1.11.0.js"></script><scr...
Highcharts报表——让你的网页上图表画的飞起【代码】【图】
Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满足你对Web图表的任何需求 ！ 以上是Highcharts中文网上的简介！ 如果论语法的简单性，或者需要画功能简单的折线、柱状以及饼状图，Highcharts是远远不如js图标库——js charts 的，但是如果涉及到复杂多样的功能特性，H...
学习笔记：Highcharts【代码】
Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库http://www.hcharts.cnhttp://www.hcharts.cn/product/download.php 下载 一个饼图小例子：<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/highcharts/4.2.5/highcharts.js"></script><script type="text/javascript"> $(function () { $(‘#containe...
Highcharts之动态刷新——结合后台数据【图】
最近要求做前台的一些东西，用到了Highcharts。。其实在Highcharts中文网上有相应的演示demo，一般你所需要的图的样式都可以找到。难点在于实际开发中，需要的数据往往是要结合后台请求并响应的数据的。附Highcharts中文网：http://www.hcharts.cn/demo/index.php而我这次做的是趋势图，涉及到动态刷新，做的过程还是花了一番功夫的，也补充和巩固了一点js的知识，为了纪念，把过程记录一下：首先，是引入HIghcharts绘图相关的js文...
highcharts实例教程一：结合php与mysql生成折线图【图】
Highcharts是一款纯javascript和html5编写的图表库，不仅几乎能兼容所有pc浏览器，而且对ios和android手机端的兼容 性也不错，它能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、折线图、面积图、柱状图、饼图、散点图 等多达28种不同类型的图表，还支持3D立体图表的生成，可以满足你对Web图表的任何需求 ！而且Highcharts对学习者、非商业机构是免费使用的。案例场景：要求针对技术cto网站，...
highcharts【图】
1.highcharts的xaxis_step是设置横轴步长的属性。当大量数据传来生成图片时，数据不可能全部展示。此时可设置xaxis_step的值来选择在横轴展示多少数据。例如如果要展示6条数据，则xaxis_step=data.length/6。如图：2.但是当数据的长度不是6的整数倍的时候，横轴会如此显示：横轴会显示出数字。此时需要这么设置：xaxis_step=parseInt(data.length/6)。3.“highcharts error #14” 是常见的错误。当传入的画图数据不是数字时，就会出...
HighCharts之2D饼图【图】
HighCharts之2D饼图1、 HighCharts之2D饼图源码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D饼图</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(){$(‘#pieChart‘).highcharts({chart: {plotBackgroundColor: null,plotBorderWi...
大数据时代的图表可视化利器——highcharts,D3和百度的echarts【图】
大数据时代的图表可视化利器——highcharts,D3和百度的echartshttps://blog.csdn.net/minidrupal/article/details/42153941 还记得阿里巴巴那个令人澎湃激情的双十一吗？还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗？还记得那些酷炫拽的it报告图表吗？在这个大数据越来越盛行的年代，怎样去表达一些用户的关系，人物的关联，甚至是事情的发展，都让我们有更多的表达方式。其中最简单直接，形象明了的就是用图表说明...
（转）JS报表控件highcharts应用
1. 官网地址 http://www.highcharts.com/ 2. 版权信息源码修改方法 在 highcharts.js 中打到 credits 将其中的 enabled 属性由 true 改为 false。如果是经过压缩后的代码，则是由 !0 改为 0。 3. 官方学习示例地址 http://www.highcharts.com/studies/ 4. 官方API http://api.highcharts.com/highcharts 5. 常用参数配置说明 chart.events.addSeries：添加数列到图表中。 chart.events.click：整...
HighCharts使用【代码】【图】
这个是很多天之前做的了，当时上级要求做一个报表，内部用的小工具。其中要画折线图，柱状图这些。用了一下JFreeChart，图是做出来了，但是这个效果很不好。直接生成了一张图片展示出来，无法进行交互。百度一下，看到了highcharts，大家评论也不错，生成的图表很酷。highcharts和easyui很像，都是通过json来传递数据，我们要做的，就是在后台封装前端所需要的数据和格式。这里说的是Highcharts中的HighStock这个工具，因为做时间图...
highcharts简介
上官网：http://www.highcharts.com/ ， http://www.hcharts.cn/ （中文版）例子、API都有原文：http://www.cnblogs.com/linguoguo/p/4181213.html
highcharts 柱形堆叠图【代码】【图】
<!doctype html><html lang="en"><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/highcharts.js"></script><script type="text/javascript" src="js/exporting.js"></script><script>$(function () {$(‘#container‘).highcharts({chart:{type:‘column‘},xAxis: {categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘A...
highcharts配置的效果如下【代码】【图】
配置如下：function init(categoryArray,seriesData,month_first_day,month_last_day,currDay){ var chart = Highcharts.chart(‘container‘, { chart: { type: ‘columnrange‘,// columnrange 依赖 highcharts-more.js inverted: false }, title: { // text: ‘持续时间统计‘ text: ‘‘ }, // subtitle: { // text: ‘Observe...
highcharts动态生成x轴数据【代码】
$.ajax({type:‘get‘,url:JsCore.SysPath + ‘finautil/GetReportProof.aspx‘,dataType: ‘json‘,success:function(data){if(data!=null){var chart = $(‘#container2‘).highcharts();var json = evalJson(data);var arr1= [];var arr2= [];$.each(json,function (key,value) {arr1.push(value.NodeName); arr2.push(value.WorkTime); });chart.xAxis[0].setCategories(arr1); chart.series[0].setData(arr2); }}}); 原文：h...
highcharts坐标轴标签不显示小数【图】
直接设置属性yAxis.allowDecimals为false即可例子链接如下：https://code.hcharts.cn/highcharts/hhhhnm 原文：http://www.cnblogs.com/YuanFan123/p/6721966.html
highcharts去掉x轴，y轴，轴线以及刻度【代码】
var chart = null; $.getJSON(‘https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?‘, function (data) {chart = Highcharts.chart(‘container‘, {chart: {zoomType: ‘x‘},title: {text: ‘美元兑欧元汇率走势图‘},subtitle: {text: document.ontouchstart === undefined ?‘鼠标拖动可以进行缩放‘ : ‘手势操作进行缩放‘},xAxis: { lineWidth :0,//去掉x轴线tickWidth:0,//去掉刻度 l...
Highcharts：X轴分组堆叠图【图】
在设计一个项目中的数据展示页面时。想要设计双X轴，一个轴显示须要的项。一个轴对这些项进行分组。效果如图：Highcharts自带双X轴展示方式。可是效果不是太理想。调整起来也会麻烦些看到Highcharts上有一个分组插件。grouped-categories.js。稍做改动就可以实现想要的效果，代码例如以下：$(function () {var chart = new Highcharts.Chart({chart: {renderTo: "container",type: "column"},title: {text: null}, plotOptions: {c...
搭建Highcharts曲线图导出工具
Highcharts是非常不错的页面曲线图工具，官网在https://www.highcharts.com/download/问题就是如果工作环境是个封闭的内网，曲线图就无法正常导出，就需要搭建本地导出服务器。搭建方法如下：官网介绍：https://www.hcharts.cn/docs/setting-up-the-server 官方提供了两种方式 一种是npm安装 一种是git安装 这里提供第一种，第二种我自己都没有成功过。首先我们要找台能连接外网的独立服务器，先把环境包都装好。 1.安装nodejswget...
highcharts分段显示不同颜色【代码】【图】
最近在做统计图的时候，碰到一个需求 类似如下：就是在红色虚线框内的折线在不同区域用不同的颜色表示，并且是虚线。开始定位为用highcharts库实现。确定用这个库后，开始在网上查资料，发现有类似的例子，网址是：http://code.hcharts.cn/hcharts.cn/hhhhco 1 $(function () {2 $(‘#container‘).highcharts({3 series: [{4 data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],5 zones: [...
6、基于highcharts实现的线性拟合，计算部分在java中实现，画的是正态概率图【代码】【图】
1、坐标点类package cn.test.domain;publicclass Point {double x;double y;public Point(){}public Point(double x, double y) {super();this.x = x;this.y = y;}publicdouble getX() {return x;}publicvoid setX(double x) {this.x = x;}publicdouble getY() {return y;}publicvoid setY(double y) {this.y = y;} }2、拟合类，带计算部分package cn.test.normcdf;import java.io.IOException; import java.text.NumberFormat; im...
highcharts php请求mysql返回json数据作为数据源进行制图【代码】【图】
直接上代码【官方文档请参见http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp】【实例http://highcharts-mzm.rhcloud.com/】1、index.html<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></scrip...
HighCharts之2D回归直线的散点【图】
HighCharts之2D回归直线的散点1、实例源码ScatterLine.html：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D回归直线的散点</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(){$(‘#scatterLine‘).highcharts({chart: {},xAxis: { /...
Highcharts：X轴分组堆叠图【图】
在设计一个项目中的数据展示页面时，想要设计双X轴，一个轴显示需要的项，一个轴对这些项进行分组，效果如图：Highcharts自带双X轴展示方式，但是效果不是太理想，调整起来也会麻烦些看到Highcharts上有一个分组插件，grouped-categories.js，稍做修改即可实现想要的效果，代码如下：$(function () {var chart = new Highcharts.Chart({chart: {renderTo: "container",type: "column"},title: {text: null}, plotOptions: {column:...
Highcharts的数据表示(1)
Highcharts的数据表示(1) 在Highcharts中，将关联的一系列的数据称为数据列。而构成数据的每一个数据单元称为数据节点。下面详细讲解数据列和数据节点的表示方式。数据列就是相关联的一系列数据的集合。例如，第一个实例所呈现的数据就是由七个温度数据构成的集合。他们的关联关系是构成连续的一周温度。在Highcharts中，数据列使用series表示。一个图表中，可以有一个或者多个数据列。所以，series的值是一个数组。形式如下：seri...
.NET 使用 Highcharts生成扇形图 柱形图【代码】【图】
1、首先新建一个.NET网站，如图所示： 2、引用所需要的js类库，如下图 highcharts.js可以在网上搜索就可以找到下载了。3、在Default.aspx页面引用js4、在 body 下添加一个<div id="container" style="width: 98%; height: 500px; margin: 0 auto"> , 前台代码如下 1<script type="text/javascript"> 2 $(function() {3var line1 =<%=manTotal%>; 4var data = [<%=percentageStr%>];5 $(‘#container‘).highcharts({6 ...
C#趋势图(highcharts插件)【代码】【图】
<!--图表效果展现--><div class="TUI-layout-center" style="overflow: auto;" id="appriseContent"><div class="ui-layout-center"><div id="listDiv" style="overflow: auto;" class="TUI-content TUI-h100"><!-- class="master_table_content_bg"--><div runat="server" id="divData" class="TUI-content TUI-h100 TUI-of-auto" style="overflow: auto;"></div></div></div><div class="ui-layout-east" id="divEast"><div id=...
MVC使用Dotnet.HighCharts做图表01,区域图表【代码】【图】
如果想在MVC中使用图表显示的话，DotNet.HighCharts是不错的选择。DotNet.HighCharts是一个开源的JavaScript图表库，支持线型图表、柱状图标、饼状图标等几十种图标。本篇实现一个简单的区域图表。在NuGet中输入关键字"DotNet.HighCharts"。 安装完后，在Scripts和程序集下多了HighCharts相关文件。HomeController中。using System.Collections.Generic; using System.Web.Mvc; using DotNet.Highcharts; using DotNet.Highcharts....
highcharts做柱状图与曲线图【代码】【图】
1、WebRoot下导入两个js文件，并引入到jsp里650) this.width=650;" src="/upload/getfiles/default/2022/11/10/20221110071338743.jpg" title="QQ图片20151217160944.png" /><script type="text/javascript" src="js/highcharts/js/highcharts.js"></script> <script type="text/javascript" src="js/highcharts/js/modules/exporting.js"></script>2、创建一个div，存放图<div id="main"style="float: left; width: 780;height:40...
highcharts点击切换，不能自适应宽度
$(".date-tab").on("click","a",function(){ $(this).addClass("cur").siblings("a").removeClass("cur"); $(".date-qushi").eq($(this).index()).show().siblings(".date-qushi").hide(); var chart = $(‘#container2‘).highcharts(); chart.reflow(); var chart2 = $(‘#container‘).highcharts(); chart2.reflow();})原文：http://www.cnblogs.com/vellemo/p/6400984.html
echarts和highcharts
highcharts是基于svg技术的 echarts基于canvas后者可以在浏览器中实现3D图形 链接 ，这种效果highcharts是完全不可能做得到的。原文：http://www.cnblogs.com/rachelch/p/7509502.html