HIGHCHARTS - 技术教程文章

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库实现。确定用这个库后,开始在网上查资料,发现有类似的例子,&#x8;网址是: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

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><scrip...

Highcharts动态添加点数据【代码】【图】

Highcharts用来作为图表数据的展示十分方便,效果也比较好。highcharts不仅可以实现死数据的展示,也能实现动态数据的实时添加显示,类似财经股票的实时刷新效果,实现过程并不难,大致如下。 引用HighCharts 3.0后,可以对装载Highcharts图表的DIV容器加上一个方法highcharts(),该方法可以将图表装载到相应的容器中。js部分的代码如下: 其中主要的方法包括function loadMoreDataForNoiseChart(seriesObj) {var series = series...

一次工作中用到的Highcharts.Chart【代码】【图】

一般动态获取图表信息都是通过ajax交互传送数据。这次是一次性从后台返回集合后,直接在页面取数据绘制图表引用js<script type="text/javascript" src="/js//jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/js/Highcharts-3.0.7/js/highcharts.js"></script>页面返回的集合有三个字段 ${listDailyActivity.lastvisit}是时间格式 2014-08-05${listDailyActivity.visitNum}是数量 这两个字段用于绘制简单的时...

vue调用 Highcharts 实现多个数据可视化展示【图】

一创建一个 options.js 代码为:export const option1 = {bar: {title: {text: ‘珠海猪场‘ // 指定图表标题},credits: {enabled: false},chart: {backgroundColor: ‘black‘,type: ‘bar‘},plotOptions: {column: {colorByPoint: true},line: {dataLabels: {// 开启数据标签enabled: true}// 关闭鼠标跟踪,对应的提示框、点击事件会失效// enableMouseTracking: false}},xAxis: {categories: [‘今日已入场‘, ‘已交易单次‘...

nodejs搭配phantomjs highcharts后台生成图表【代码】【图】

简单分享一下,后台使用nodejs结合highcharts、phantomjs生成报表图片的方法。这主要应用在日报邮件。主要参考以下资料:http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts#phantom_usagehttps://bitbucket.org/ariya/phantomjs/downloadshttps://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs 这里整个目录都需要下载关键是使用phantomjs模拟...

highcharts 根据表格转化为不同的图表【代码】【图】

<!doctype html><html lang="zh"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/highcharts.js"></script><script type="text/javascript" src="js/modules/data.js"></script><script type="text/javascript">$(document).ready(function(){changeChart(‘line‘);$("button.btnChart")....

将Highcharts图表数据生成Table表格【代码】【图】

有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了。  首先,先显示统计图。  Html----通过一个查询按钮,根据查询条件,查询满足条件的数据,显示到统计图中。<a onclick="Query();">查询</a><center> <div id="chartPro" style="width: 80%"></div> <div id="container" style="width:700px...

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo【图】

原文:Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo源代码下载地址:http://www.zuidaima.com/share/1550463370480640.htm 此功能可以用在后端对数据的实时抓取,前端动态更新时使用,可以根据数据的变化进行实时刷新,基于之前我上传的一个图形demo改制。如有意见建议,疑问,大家可以留言一起探讨。 源代码截图: 原文:http://blog.csdn.net/springmvc_springdata/article/details/39076751

highcharts图表的常见操作【代码】

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="TCPConnect"></div><!-- 引入highcharts --><script src="../highcharts/highcharts.js"></script><script src="../highcharts/highcharts-zh_CN.js"></script><script> //------------- //- TCPConnect CHART - //-------------- Highcharts.setOptions({ global:{ timezone:‘A...

Highcharts.js -纯javasctipt图表库初体验【代码】

一.highcharts简介以及引入  highcharts作为免费提供给个人学习、个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便。在我最近完成一个需求的时候用到了它, 它的兼容性也很强,其在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图。我们在使用highcharts的时候只需要引入highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框...