highChar

最新推荐文章于 2020-05-06 15:19:58 发布
最新推荐文章于 2020-05-06 15:19:58 发布
阅读量418 收藏
点赞数
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuli_1234567890/article/details/52181882
版权

controller

@Controller
@RequestMapping("/char")
public class CharController {
    @RequestMapping("/show")
	public ModelAndView showchar(){
    	System.out.println("into");
    	Prem p=new Prem();
    	p.setName("Tokyo");
    	p.setData(new float[]{1,2,3,23,23,11,2,5,6,4,5,9});
    	Prem p1=new Prem();
    	p1.setName("New York");
    	p1.setData(new float[]{5,2,13,2,3,11,2,15,6,14,15,19});
     
    	//
    	Title title=new Title();
    	title.setText("折线图");
    	title.setX(-20);
    	//
    	Subtitle subtitle=new Subtitle();
    	subtitle.setText("月份-值");
    	subtitle.setX(-20);
    	//
    	Xaxis xaxis=new Xaxis();
        xaxis.setCategories(new String[]{"一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"});
    	//
        YaxisTitle yaxisTitle =new YaxisTitle();
        yaxisTitle.setText("temperatrue°C");
        PlotLines plotLines=new PlotLines();
        plotLines.setValue(0);
        plotLines.setColor("#808080");
        plotLines.setWidth(1);
        Yaxis yaxis=new Yaxis();
        yaxis.setPlotLines(new PlotLines[]{plotLines});
        yaxis.setTitle(yaxisTitle);
        //
        Tooltip tooltip=new Tooltip();
        tooltip.setValueSuffix("°C");
        //
        Legend legend=new Legend();
        legend.setAlign("right");
        legend.setLayout("vertical");
        legend.setBorderWidth(0);
        legend.setVerticalAlign("middle");
        //
        Map<String,Object> map=new HashMap<>();
        map.put("cvs", "cvs");
        //
    	Highcharts highcharts=new Highcharts();
    	highcharts.setTitle(title);
    	highcharts.setSubtitle(subtitle);
    	highcharts.setXaxis(xaxis);
    	highcharts.setYaxis(yaxis);
    	highcharts.setTooltip(tooltip);
    	highcharts.setLegend(legend);
    	highcharts.setSeries(new Prem[]{p,p1});
    	highcharts.setChart(map);
    	
    	String lin=JSONObject.toJSONString(highcharts).replace("xaxis", "xAxis").replace("yaxis", "yAxis");
    	String pie=JSONObject.toJSONString(pieChar());
    	String area=JSONObject.toJSONString(areashow());
    	String column=JSONObject.toJSONString(columnshow());
    	String c3dcolumn=JSONObject.toJSONString(c3dcolumn());
    	//System.out.println(str);
    	ModelAndView mav=new ModelAndView("index");
    	mav.addObject("lin", lin);
    	mav.addObject("pie", pie);
    	mav.addObject("area", area);
    	mav.addObject("column", column);
    	mav.addObject("c3dcolumn", c3dcolumn);
    	return mav;
    }
    @RequestMapping(value="/column")
    public ModelAndView show3dcolumn(){
    	ModelAndView mav=new ModelAndView("s3dcolumn");
    	String c3dcolumn=JSONObject.toJSONString(c3dcolumn());
    	mav.addObject("c3dcolumn", c3dcolumn);
    	return mav;
    }
    public Map<String,Object> loadchar(){
    	Map<String,Object> chart=new HashMap<>();
    	chart.put("zoomType", "x");
    	//
    	Map<String,Object> title =new HashMap<>();
    	title.put("text", "USD to EUR exchange rate over time");
    	//
    	Map<String,Object> subtitle =new HashMap<>();
    	subtitle.put("text", "测试");
    	//
    	Map<String,Object> xAxis =new HashMap<>();
    	xAxis.put("type", "datetime");
    	//
    	Map<String,Object> yAxis =new HashMap<>();
    	Map<String,Object> yAxis_title =new HashMap<>();
    	yAxis_title.put("text", "Exchange rate");
    	yAxis.put("title", yAxis_title);
    	//
    	Map<String,Object> legend=new HashMap<>();
    	legend.put("enabled", false);
    	//
    	Map<String,Object> plotOptions=new HashMap<>();
    	Map<String,Object> area =new HashMap<>();
    	Map<String,Object> fillColor=new HashMap<>();
    	Map<String,Object> linearGradient=new HashMap<>();
    	linearGradient.put("x1", 0);
    	linearGradient.put("y1", 0);
    	linearGradient.put("x2", 0);
    	linearGradient.put("y2", 0);
    	return null;
    	
    }
    public Map<String,Object> pieChar(){
    	Map<String,Object> chart =new HashMap<>();
    	chart.put("plotBackgroundColor", null);
    	chart.put("plotBorderWidth", null);
    	chart.put("plotShadow", false);
    	chart.put("type", "pie");
    	//
    	Map<String,Object> title =new HashMap<>();
    	title.put("text", "饼状图");
    	//
    	Map<String,Object> tooltip =new HashMap<>();
    	tooltip.put("pointFormat", "浏览器占比");
    	//
    	Map<String,Object> dataLabels=new HashMap<>();
    	Map<String,Object> pie=new HashMap<>();
    	Map<String,Object> plotOptions=new HashMap<>();
    	dataLabels.put("enabled", false);
    	pie.put("allowPointSelect", true);
    	pie.put("cursor", "pointer");
    	pie.put("dataLabels", dataLabels);
    	pie.put("showInLegend", true);
    	//
    	Map<String,Object> data=new HashMap<>();
    	data.put("name", "Explorer");
    	data.put("y", 56.33);
    	Map<String,Object> data1=new HashMap<>();
    	data1.put("name", "Chrome");
    	data1.put("y", 24.03);
    	data1.put("sliced", true);
    	data1.put("selected", true);
    	Map<String,Object> data2=new HashMap<>();
    	data2.put("name", "Firefox");
    	data2.put("y", 10.38);
    	Object[] datas =new Object[]{data,data1,data2};
    	
    	Map<String,Object> series=new HashMap<>();
    	series.put("name", "Brands");
    	series.put("colorByPoint", true);
    	series.put("data", datas);
    	
    	Map<String,Object> all=new HashMap<>();
    	all.put("chart", chart);
    	all.put("title", title);
    	all.put("tooltip", tooltip);
    	all.put("plotOptions", plotOptions);
    	all.put("series", new Object[]{series});
    	
    	
        return all;
    	
    	
    }
    public Map<String,Object> areashow(){
    	Map<String,Object> chart =new HashMap<>();
    	chart.put("type", "area");
    	//
    	Map<String,Object> title =new HashMap<>();
    	title.put("text", "面积图");
    	//
    	Map<String,Object> subtitle =new HashMap<>();
    	subtitle.put("text", "对比");
    	//
    	Map<String,Object> xAxis_title =new HashMap<>();
    	xAxis_title.put("enabled", false);
    	Map<String,Object> xAxis =new HashMap<>();
    	xAxis.put("categories", new String[]{"1750", "1800", "1850", "1900", "1950", "1999", "2050"});
    	xAxis.put("tickmarkPlacement","on");
    	xAxis.put("title",xAxis_title);
    	//
    	Map<String,Object> yAxis =new HashMap<>();
    	Map<String,Object> yAxis_title =new HashMap<>();
    	yAxis_title.put("text", "Billions");
    	Map<String,Object> yAxis_labels =new HashMap<>();
    	yAxis_labels.put("labels", "CCCC");
    	//
    	Map<String,Object> tooltip =new HashMap<>();
    	tooltip.put("shared", true);
    	tooltip.put("valueSuffix", "millions");
    	//
    	Map<String,Object> plotOptions =new HashMap<>();
    	Map<String,Object> area =new HashMap<>();
    	Map<String,Object> marker =new HashMap<>();
    	marker.put("lineWidth", 1);
    	marker.put("lineColor", "#666666");
    	area.put("stacking", "normal");
    	area.put("lineColor", "#666666");
    	area.put("lineWidth", 1);
    	area.put("marker", marker);
    	plotOptions.put("area", area);
    	//
    	Map<String,Object> series =new HashMap<>();
    	series.put("name", "中国");
    	series.put("data", new int[]{502, 635, 809, 947, 1402, 3634, 5268});
    	Map<String,Object> series1 =new HashMap<>();
    	series1.put("name", "美国");
    	series1.put("data", new int[]{106, 107, 111, 133, 221, 767, 1766});
    	Map<String,Object> series2 =new HashMap<>();
    	series2.put("name", "俄罗斯");
    	series2.put("data", new int[]{163, 203, 276, 408, 547, 729, 628});
    	Map<String,Object> series3 =new HashMap<>();
    	series3.put("name", "欧盟");
    	series3.put("data", new int[]{18, 31, 54, 156, 339, 818, 1201});
    	Map<String,Object> series4 =new HashMap<>();
    	series4.put("name", "北约");
    	series4.put("data", new int[]{2, 2, 2, 6, 13, 30, 46});
    	//
    	Map<String,Object> areachar =new HashMap<>();
        areachar.put("chart", chart);
        areachar.put("title", title);
        areachar.put("subtitle", subtitle);
        areachar.put("xAxis", xAxis);
        areachar.put("yAxis", yAxis);
        areachar.put("tooltip", tooltip);
        areachar.put("plotOptions", plotOptions);
        areachar.put("series", new Object[]{series,series1,series2,series3,series4});
        
        return areachar;
    }
    
    public Map<String,Object> columnshow(){
    	Map<String,Object> chart =new HashMap<>();
    	chart.put("type", "column");
    	//
    	Map<String,Object> title =new HashMap<>();
    	title.put("text","柱状图");
    	//
    	Map<String,Object> subtitle =new HashMap<>();
    	subtitle.put("text", "对比");
    	//
    	Map<String,Object> xAxis =new HashMap<>();
    	xAxis.put("categories", new String[]{"一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"});
    	//
    	Map<String,Object> yAxis =new HashMap<>();
    	Map<String,Object> yAxis_title =new HashMap<>();
    	yAxis_title.put("text", "单位00");
    	yAxis.put("min", 0);
    	yAxis.put("title", title);
    	//
    	Map<String,Object> tooltip =new HashMap<>();
    	tooltip.put("headerFormat", "<span style='font-size:10px'>{point.key}</span><table>");
    	tooltip.put("pointFormat", "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.1f} mm</b></td></tr>");
    	tooltip.put("footerFormat", "</table>");
    	tooltip.put("shared", true);
    	tooltip.put("useHTML", true);
    	//
    	Map<String,Object> plotOptions =new HashMap<>();
    	Map<String,Object> column =new HashMap<>();
    	column.put("pointPadding", 0.2);
    	column.put("borderWidth", 0);
    	plotOptions.put("column", column);
    	//
    	Map<String,Object> series =new HashMap<>();
    	series.put("name", "北京");
    	series.put("data", new double[]{49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4});
    	Map<String,Object> series1 =new HashMap<>();
    	series1.put("name", "纽约");
    	series1.put("data", new double[]{83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3});
    	Map<String,Object> series2 =new HashMap<>();
    	series2.put("name", "伦敦");
    	series2.put("data", new double[]{48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2});
    	Map<String,Object> series3 =new HashMap<>();
    	series3.put("name", "柏林");
    	series3.put("data", new double[]{42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1});
    	//
    	Map<String,Object> columnchar =new HashMap<>();
    	columnchar.put("chart", chart);
    	columnchar.put("title", title);
    	columnchar.put("subtitle", subtitle);
    	columnchar.put("xAxis", xAxis);
    	columnchar.put("yAxis", yAxis);
    	columnchar.put("tooltip", tooltip);
    	columnchar.put("plotOptions", plotOptions);
    	columnchar.put("series", new Object[]{series,series1,series2,series3});
    	
    	return columnchar;
    }
    
    public Map<String,Object> c3dcolumn(){
    	Map<String,Object> chart =new HashMap<>();
    	Map<String,Object> options3d =new HashMap<>();
    	options3d.put("enabled", true);
    	options3d.put("alpha", 15);
    	options3d.put("beta", 15);
    	options3d.put("depth", 50);
    	options3d.put("viewDistance", 25);
    	chart.put("renderTo", "s3dcolumn");
    	chart.put("type", "column");
    	chart.put("options3d", options3d);
    	//
    	Map<String,Object> title =new HashMap<>();
    	title.put("text", "3D柱状图");
    	//
    	Map<String,Object> subtitle =new HashMap<>();
    	subtitle.put("text", "小标题");
        //
    	Map<String,Object> column =new HashMap<>();
    	Map<String,Object> plotOptions =new HashMap<>();
    	column.put("depth", 25);
    	column.put("plotOptions", column);
    	//
    	Map<String,Object> series =new HashMap<>();
    	series.put("data", new double[]{29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4});
    	series.put("name", "NO1");
    	Map<String,Object> series1 =new HashMap<>();
    	series1.put("data", new double[]{21.9, 51.5, 16.4, 29.2, 44.0, 176.0, 15.6, 118.5, 116.4, 294.1, 195.6, 154.4});
    	series1.put("name", "NO2");
    	Map<String,Object> s3dcolumn =new HashMap<>();
    	s3dcolumn.put("chart", chart);
    	s3dcolumn.put("title", title);
    	s3dcolumn.put("subtitle", subtitle);
    	s3dcolumn.put("plotOptions", plotOptions);
    	s3dcolumn.put("series", new Object[]{series,series1});
    	return s3dcolumn;
    }
}

jsp

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
#container, #sliders {
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
#container {
    height: 400px; 
}
		</style>
		<script type="text/javascript">
		var lin=${lin};
		var pie=${pie};
		var area=${area};
		var column=${column};
		var c3dcolumn=${c3dcolumn};
		$(function () {
		    $('#lin').highcharts(lin);
		    $('#pie').highcharts(pie);
		    $('#area').highcharts(area);
		    $('#column').highcharts(column);
       });
	   <!---->
	   var chart = new Highcharts.Chart(c3dcolumn);

	    function showValues() {
	        $('#alpha-value').html(chart.options.chart.options3d.alpha);
	        $('#beta-value').html(chart.options.chart.options3d.beta);
	        $('#depth-value').html(chart.options.chart.options3d.depth);
	    }

	    // Activate the sliders
	    $('#sliders input').on('input change', function () {
	        chart.options.chart.options3d[this.id] = this.value;
	        showValues();
	        chart.redraw(false);
	    });

	    showValues();
		
		</script>
	</head>
	<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<table>
  <tr><td><div id="lin"></div></td><td><div id="column"></div></td> </tr>
  <tr><td><div id="pie"></div></td><td></td></tr>
  <tr><td><div id="area"></div></td><td></td> </tr>
  
</table>
 
    
        	  
 
	</body>
</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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
#container, #sliders {
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
#container {
    height: 400px; 
}
		</style>
		<script type="text/javascript">
		var c3dcolumn =${c3dcolumn};
$(function () {
    // Set up the chart
    var chart = new Highcharts.Chart(c3dcolumn);

    function showValues() {
        $('#alpha-value').html(chart.options.chart.options3d.alpha);
        $('#beta-value').html(chart.options.chart.options3d.beta);
        $('#depth-value').html(chart.options.chart.options3d.depth);
    }

    // Activate the sliders
    $('#sliders input').on('input change', function () {
        chart.options.chart.options3d[this.id] = this.value;
        showValues();
        chart.redraw(false);
    });

    showValues();
});
		</script>
	</head>
	<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="s3dcolumn"></div>
<div id="sliders">
    <table>
        <tr>
        	<td>Alpha Angle</td>
        	<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Beta Angle</td>
        	<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Depth</td>
        	<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
        </tr>
    </table>
</div>
	</body>
</html>




louis_liuli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Highcharts使用指南
weixin_34037515的博客
01-24 798
摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。   目录 前言（Preface） 安装（Installation） 如何设置参数（How to set up the options） 预处理参数（Preprocess th...
highchar插件
qq_34042417的博客
09-15 261
在网络应用中，为了将数据更好的呈现，我向大家介绍一款可视化的插件highchar。 样例全部简化，可以直接用： https://download.csdn.net/download/qq_34042417/10669205 ...
HighChar 案例
weixin_34352005的博客
12-28 111
Highchars //前台 <script> $(function () { //showChat(); initChat(); showPie(); initPie(); }) function initChat() { var xlst = []; var ylst = []; $.ajax({ url: "Handler1....
Highcharts(十六)
shi199434的博客
02-04 621
Highcharts 树状图(Treemap) 本章节我们将为大家介绍 Highcharts 的热点图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 树状图 series 配置 设置 series 的 type 属性为 treemap ，series.type 描述了数据列类型。默认值为 "lin
HighChar 详解-双Y轴-及各
易燃易爆炸
07-25 1598
网上的例子，数据都是写死的，有点不实用吧 我在这里举一个，展示功能需求的数据。按需从数据库获取并画图展示  (本例子结合 angular.js，其他前台框架同理 从后台获取数据即可) 1.首先要引入Jquery.JS，再引入相关highChar.js 如果结合前台框架使用的话 ，比如 angular.js vue.js 这些前台框架，要注意引入顺序，highChar.js的引入必须在他们后面
highchar api
01-24
Highchar API 是一个专门用于创建高质量图表和图形的编程接口，尤其在数据分析和可视化领域有着广泛的应用。这个API提供了一套全面的工具和方法，帮助开发者轻松地在Web应用程序中集成各种类型的图表，如柱状图、...
Highcharts-Maps-9.3.1.zip
最新发布
06-05
图表库
Highcharts-Stock-9.3.1.zip
06-05
图表库
Highcharts-Gantt-9.3.1.zip
06-05
图表库
Highcharts-9.3.1.zip
06-05
图表库
HighCharts 折线图，柱形图，饼图实现
tan_thinker的博客
06-17 3178
我在此为大家展示常见的折线图，柱形图，饼图 的实现过程； —-把数据做成活的就是把数据转换成人家的格式，下面就是具体的实现步骤，若有更好的转换方式请留言。*声明：其中含有自己的业务逻辑，已经标注其中，自己根据需求查看。 发现问题，遇到问题可以直接指出！希望在此可以帮助大家，给大家提供便利，让大家共同进步~*1.折线图： 首先从后台获取数据：@ResponseBody @RequestMappi
highcharts系列之xAxis
weixin_33698823的博客
11-27 457
xAxis定义的是x坐标轴的配置选项。默认情况下，x轴指的是水平轴，特殊指定的时候也可以作为垂直的轴使用，在多坐标系中，xAxis是有多个配置好了的轴object的数组。 下面来看一下，xAxis常用的属性都有哪些：   属性　　 数据类型 默认值 说明 type String datetime 可...
Highchart基础教程－图表的主要组成
weixin_34007906的博客
10-30 141
一、Highchar图表的主要组成 1、图表标题（Title）：图表包含标题和副表题（subTitle,可选）。 2、坐标轴（Axis）:包括x轴（xAxis）和y轴（yAxis）。多个数据列可以共同使用一个坐标轴，为了对比或区分数据，Highchar提供了多轴的支持。 3、数据列（Series）:例如：曲线图的一条曲线，柱状图的一个柱形。 4、数据提示框（Tooltip）:当鼠标悬停...
HighChart开发笔记--标示线plotLines的label标签不显示
u013025674的博客
03-01 2587
今天被经理告知用HighChar插件来显示测点数据历史曲线的功能出了个小bug：标示线plotLines的label标签不显示。这个项目已经上线了几个月，之前都是没问题的，再三确认无人动过这处代码后，便自己打开highchart的官方API页面开始研究了。 这是我关于plotLine标示线的配置代码 这是页面效果： ...
highchar图表操作属性操作
liman1002的专栏
05-06 207
,credits: { enabled:false },rangeSelector: { buttonTheme: { display: 'none' // 不显示按钮 }, selected: 1, inputEnabled: false // 不显示日期输入框...
【Highchar】两图联动配置
jl381169437的博客
10-31 706
highchart常用的两图联动配置写法 chart: { type: 'area', plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false, backgroundColor: 'transparent', spacing: ...
图表工具：Highcharts 使用( 上 )
ygyblue2的博客
07-18 807
最近在项目中接触了一个图表工具，个人感觉非常好用呀！ 由于暂时这个公司的组织架构，并非是前后端完全分离的，所以也需要我参与前台逻辑。对于前后端分离的这个事呢，我个人觉得有好有坏，比如我此前的东家是前后端完全分离的，那时几乎不写js，都是后台技术和逻辑。而现在的公司（不说名字了，互联网媒体，三个字，做新闻资讯，香港公司）在后台开发的同时需要我在web前台逻辑上也参与（h5）除外，记得刚入职的时候就...
HighCharts初学____（1）
咸鱼的星空
12-30 5465
HighCharts初识 1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表 Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。 2、 Highcharts官网：http://www.highchart
highcharts用法
朱明代月的博客
01-05 1071
highcharts是一个十分强大的图表绘制插件，网上关于其用法有很多，不过最全的资料仍是官方api，这里通过一个动态绘制车辆速度曲线图的实例学习highcharts。highcharts将图表表示成层级结构，例如对于曲线图，首先需要一个容器，即一个div，这个容器里有一个chart，我们可以在初始化时对这个chart进行配置，比如type属性决定了绘制图线类型，”line”为折线图，”bar”为柱
玩转Highcharts图表库系列（一） 显示多条曲线
热门推荐
日西月东的专栏
11-26 1万+
Highcharts是一款纯javascript编写的图表库，能够很简单便捷地在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，功能强大、简单易用，并且开源免费。笔者曾经在多个能耗管理系统中使用到了它，为了满足各种图表显示要求，也算是历经磨难。有关于基础的使用方法和完整的API请查看Highcharts中文

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值