用过此服务？体验如何呢？给个点评吧~
展示形式多样
展示形式单一
发送私信成功
为了尽快解决大伙儿的问题，请务必要找相对应的客服哦~
满足所有需求，助您轻松工作
借鉴经验分享，提升个人能力
渗入项目始终，切磋解决问题
关注（3） 已关注
Highcharts中文网怎么样呢？
暂时没有综合点评哦~&
所属公司：暂时还没有所属公司~
是否免费：个人及非商业用途开源免费，商用收费
支持数据来源：支持多种数据形式，可以是Javascript数组、json文件、json对象和表格数据等，这些数据来源可以是本地、不同页面，甚至是不同网站
自定义类型：线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图
数据显示分享：支持
数据对比：支持
Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighChar...
暂时没有关于该工具|服务的任何下载，上传相关资源可获活力值奖励~&
Highcharts中文网服务在DevStore的数据统计
相关市场数据统计
大家都在问
暂时没有此工具|服务的相关问答&
竞品推荐 （相关工具|服务）
暂时没有此工具|服务的相关资讯&
开发者交流群：
运营交流群：
产品交流群：
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved
申请为官方人员
DevStore用户登录
还没有DevStore帐号？
快捷登录：4909人阅读
基于JQuery easyUI 使用Highcharts实现了数据柱状图的显示，前段显示主要使用Highchartst这个图表库，后端使用etmvc框架从数据库获取数据，前后端数据交互采用Json数据格式，主要代码如下：
前段HTML：
&div style=&padding:5&&
&fieldset&
&div style=&margin: 0 1px&&
&div id=&containerliuliang& style=&min-width: 368 height: 368 margin: 0 auto&&&/div&
&/fieldset&
&script type=&text/javascript&&
/*获取json数据开始*/
//定义变量
$(document).ready(function () {
var jsonXData = [];
var jsonyD1 = [];
var jsonyD2 = [];
//获取数据
$.ajax({ url: '/ciccpsMember/memberfee/memberfeeByYear',
cache: false,
async: false,
success: function (data) {
var json = eval(&(& + data + &)&);
if (json.Rows.length & 0) {
for (var i = 0; i & json.Rows. i++) {
var rows = json.Rows[i];
var Year = rows.
var ShouldPay = rows.shouldP
var TruePay = rows.trueP
jsonXData.push(Year); //赋值
jsonyD1.push(ShouldPay);
jsonyD2.push(TruePay);
chart = new Highcharts.Chart({
renderTo: 'containerliuliang',//放置图表的容器
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'column'
//图表类型line, spline, area, areaspline, column, bar, pie , scatter
text: '近年会费缴纳情况',
style: { font: 'normal 13px 宋体' }
xAxis: {//X轴数据
categories: jsonXData,
lineWidth: 2,
rotation: -45, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
yAxis: {//Y轴显示文字
lineWidth: 2,
text: '金额/万元'
tooltip: {
formatter: function () {
return '&b&' + this.x + '&/b&&br/&' +
this.series.name + ': ' + this.y+'万元';
plotOptions: {
dataLabels: {
enabled: true
enableMouseTracking: true//是否显示title
series: [{
name: '应缴',
data: jsonyD1
name: '实缴',
data: jsonyD2
//$(&tspan:last&).hide(); //把广告删除掉
后端代码：
* 近几年会费
public JsonView memberfeeByYear() throws Exception {
db connection = new db();
String sql = &select * from
memberfeesview&;
ResultSet rs = connection.executeQuery(sql);
List&Map&String, Object&& _list = new ArrayList&Map&String, Object&&();
if (rs != null) {
while (rs.next()) {
/* 获取信息 */
Map&String, Object& _map = new HashMap&String, Object&();
_map.put(&year&, rs.getString(&year&));
_map.put(&shouldPay&, rs.getFloat(&shouldPay&));
_map.put(&truePay&, rs.getFloat(&truePay&));
_list.add(_map);
} catch (Exception e) {
e.printStackTrace();
} finally {
rs.close();
} catch (Exception e) {
e.printStackTrace();
connection.closed();
Map&String, Object& result = new HashMap&String, Object&();
result.put(&RowCount&,_list.size());
result.put(&Rows&, _list);
JsonView view = new JsonView(result);
view.setContentType(&text/charset=utf-8&);
Json数据格式：
{&Rows&:[{&truePay&:30.0,&shouldPay&:140.0,&year&:&2013&},{&truePay&:140.0,&shouldPay&:140.0,&year&:&2012&},{&truePay&:134.5,&shouldPay&:140.0,&year&:&2011&},{&truePay&:141.0,&shouldPay&:140.0,&year&:&2010&},{&truePay&:85.0,&shouldPay&:86.5,&year&:&2009&}],&RowCount&:5}
运行截图：
先介绍到这，其他图可结合Highcharts相关的教程来实现，附带
里面有多个不同的JS图标库的示例代码！
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：553887次
积分：7572
积分：7572
排名：第1249名
原创：123篇
评论：423条
NAME：FCPlayer
CITY：Beijing
Degree：Master
Skills：Java、IOS、.NET
文章：11篇
阅读：43180
(1)(1)(2)(2)(1)(1)(1)(2)(1)(1)(1)(1)(1)(3)(5)(6)(1)(5)(5)(5)(4)(2)(8)(5)(5)(8)(14)(16)(5)(5)(5)(3)(2)(1)(2)(3)如何给highcharts柱状图上方加上数据标识符_百度知道
如何给highcharts柱状图上方加上数据标识符
提问者采纳
针对这类问题，其实在highcharts的相应API内有一个属性dataLabels可以加以控制的。代码如下所示：view sourceprint?1.plotOptions:{2.
column:{3.
dataLabels:{4.
enabled:true //是否显示数据标签5.
作者：highcharts
电子产品技术支持
其他类似问题
为您推荐：
highcharts的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁请教大牛们，这样一个HighCharts 绘制图表json数据如何来定义
series: [b][{
type: 'pie',
name: 'Browser share',
['Firefox',
['Chrome',
['Safari',
['Others',
问题补充：asyty 写道你要干啥？目的何在？。。。是要定义json传递给HightCharts嚒
{series:[{
type: 'pie',
name: 'Browser share',
['Firefox',
['Chrome',
['Safari',
['Others',
}]}
上面的serise本身就是json格式的啊，有个series数组，里面包含tpye，name，data，data又是一个数组，里面包含['Firefox',&& 45.0]这样的数组
asyty 写道你要干啥？目的何在？。。。是要定义json传递给HightCharts嚒
{series:[{
type: 'pie',
name: 'Browser share',
['Firefox',
['Chrome',
['Safari',
['Others',
}]}
上面的serise本身就是json格式的啊，有个series数组，里面包含tpye，name，data，data又是一个数组，里面包含['Firefox',&& 45.0]这样的数组
嗯，后来也是按照这样弄出来了。谢谢啦
采纳的答案
你要干啥？目的何在？。。。是要定义json传递给HightCharts嚒
{series:[{
type: 'pie',
name: 'Browser share',
['Firefox',
['Chrome',
['Safari',
['Others',
}]}
上面的serise本身就是json格式的啊，有个series数组，里面包含tpye，name，data，data又是一个数组，里面包含['Firefox',&& 45.0]这样的数组
http://-qq-/blog/1071472不知道这个是不是你要的，我用的就是这个方法
你是想问json的格式？
已解决问题
未解决问题基于ssh框架的highcharts前后台数据交互实例
编辑：www.fx114.net
本篇文章主要介绍了"基于ssh框架的highcharts前后台数据交互实例 "，主要涉及到基于ssh框架的highcharts前后台数据交互实例 方面的内容，对于基于ssh框架的highcharts前后台数据交互实例 感兴趣的同学可以参考一下。
　　Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
　　官网：，官网上的数据都是写死的，作为一名菜鸟，搞了很久才知道怎么传递，现特地写出来，希望能对大家有帮助。
&
　　作为一名初入java web后台开发的菜鸟，在使用时highcharts时不知道前后台数据是怎么交互的，经过一番折腾，终于搞出一套方案，将后台传递数据传到前台。（可能我还是菜鸟，错误之处，大家自行甄别，以下我提到的只是我理解的，切忌不可当真）
　　传递流程如下：首先，在前台jsp界面上会发送一个action1的form表单请求，会把一些数据传到后台进行处理（相对的action1），此时，action1返回的是success转到1.jsp界面。在1.jsp界面中，将action1函数中的一些数据hide在1.jsp中。当转入1.jsp时，会加载ajax，ajax又转到一个action url，这个url会带着hide在1.jsp中数据，转入另一个action:action2.action返回的是json数据，这时，再会把json做一定处理传到highcharts。
&1.form表单
&s:form action="action1" namespace="/" &
//一些其他的要传入到后台的表单数据　
&/s:form&
public class actionAction extends BaseAction {
　　public String action1() {
　　　　//将前台的表单数据进行一些处理
　　　　Map xAxisMap = new HashMap();
　　　　Map yAxisMap = new HashMap();
　　　　//传值到xAxisMap，yAxisMap,hide在1.jsp的界面中
　　　　return
　　}
}
&action name="action1" class="actionAction" method="action1"&
　　&result&/1.jsp&/result&
&/action&
&
3.前台1.jsp相关设置
&s:hidden id="xAxisMap" name="xAxisMap" value="%{xAxisMap}"/&&!-- highcharts图表的x轴数据 --&
&s:hidden id="yAxisMap" name="yAxisMap" value="%{yAxisMap}"/&&!-- highcharts图表的y轴数据 --&
$(function(){
type: 'POST',
dataType: 'JSON',
url: nameSpace+"/statisticLog.action?xAxisMap="+$("#xAxisMap").val()+"&yAxisMap="+$("#yAxisMap").val(),
success : function(result){
解析result数据，形成highcharts图表
&
4.action2处理xAxisMap，yAxisMap数据，转成json格式，也方便，在js文件中的ajax里面调用传入highcharts插件中。
public String action2() {
//处理xAxisMap，yAxisMap并赋到jsonMap中
&action name="action2" class="actionAction" method="action2"&
&result type="json"&&param name="root"&jsonMap&/param&&/result&
&result name="input" type="json"&&param name="root"&jsonMap&/param&&/result&
　　action2返回的是json数据，在ajax中的success function（result）{}中的result就是那个json型数据jsonMap。
　　在加载1jsp，ajax会同步加载，调用aciton2，解析返回的jsonMap，highcharts也会显示出来。
&
附：highcharts的使用设置
　　highcharts初始化设置方法，一个为饼状图，一个为折线图。highcharts很重要的一部分就是数据格式的处理。
function showLine(lineChart) {
data0=lineChart[0];
data1=lineChart[1];
data2=lineChart[2];
data3=lineChart[3];
data4=lineChart[4];
data5=lineChart[5];
data6=lineChart[6];
data7=lineChart[7];
data8=lineChart[8];
var chart = new Highcharts.Chart({
renderTo: 'chart',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
text: 'smdb访问量统计',
x: -20 //center
subtitle: {
text: '各模块访问量折线图',
categories: data8
text: '访问次数'
plotLines: [{
color: '#808080'
tooltip: {
formatter: function() {
return '&b&'+ this.series.name +'&/b&&br/&'+
this.x +': '+ this.y +'';
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0
plotOptions: {
dataLabels: {
enabled: true
enableMouseTracking: false
series: [{
name: 'serverCount',
data: data0
name: 'systemCount',
data: data1
name: 'securityCount',
data: data2
name: 'personCount',
data: data3
name: 'unitCount',
data: data4
name: 'projectCount',
data: data5
name: 'productCount',
data: data6
name: 'awardCount',
data: data7
function showPie(arr) {
var data1=arr[0];
var data2=arr[1];
var data3=arr[2];
var data4=arr[3];
var data5=arr[4];
var data6=arr[5];
var data7=arr[6];
var chart = new Highcharts.Chart({
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
text: 'smdb访问统计比例饼状图'
tooltip: {
formatter: function() {
return '&b&' + this.point.name + '&/b&: ' + '总计'+this.y + '次';
plotOptions: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '&b&' + this.point.name + '&/b&: ' + '总计'+this.y + '次';
type: 'pie',
name: 'Browser share',
[['systemCount',data1],
['securityCount',data2],
['personCount',data3],
['unitCount',data4],
['projectCount',data5],
['productCount',data6],
['awardCount',data7],
本文标题：
本页链接：