二次元同好交流新大陆
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
分类：& 21:09&38人阅读&(0)&&1.在一个图像中有多条曲线，但是默认想只显示第一条曲线，则需要做如下设置即可：[javascript]&2.去掉highcharts网站url采用highcharts绘图，右下角默认会有一个其网站url存在，这会影响美观，只需做如下设置即可去掉：[html]&3.动态增加曲线数量如需在显示曲线后动态增加显示曲线条数，只需如下操作即可：[javascript]&4.动态删除曲线[javascript]&5.动态改变曲线数据参考：
阅读(4694)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'Highcharts基本设置',
blogAbstract:'分类：&'
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}扫描二维码用手机看文章后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2921|回复: 1
Highcharts 怎么给data:赋值
UID256282在线时间 小时积分379帖子离线16883 天注册时间
中级会员, 积分 379, 距离下一级还需 121 积分
本帖最后由 cl2006 于
20:18 编辑
最近要整个柱状图，数据从XML文件中取，百度了下Highcharts效果不错 但是不会用，研究了半天还是不知道怎么将xml中数据取过来赋值给chart下的 data：
series: [{
& && && && && & name: '东子',
& && && && && & //data: [108, 60, 93]& &
& && && && && &data: dh_db&&//这个地方赋值没效果 该如何解决呢&&
& && && & }, {
& && && && && & name: '刘成',
& && && && && & //data: [173, 109, 364]
& && && && && &data: lc_db&&//这个地方取值失败 要怎么解决呢？？
& && && && &}]& & & &
，求高手解答 谢谢
XML文件，data.xml&?xml version=&1.0& encoding=&UTF-8&?&
&chart&
&&&labels&
& & &label lid=&0&&
& && &&x /&
& && &&y&20&/y&
& && &&rotate /&
& && &&width&460&/width&
& && &&align&center&/align&
& && &&text_color /&
& && &&text_size&14&/text_size&
& && &&text&&![CDATA[&b&销售数据统计&/b&]]&&/text&
& & &/label&
&&&/labels&
&&&series&
& & &value xid=&1&&1月&/value&
& & &value xid=&2&&2月&/value&
& & &value xid=&3&&3月&/value&
& & &value xid=&4&&4月&/value&
& & &value xid=&5&&5月&/value&
& & &value xid=&6&&6月&/value&
& & &value xid=&7&&7月&/value&
& & &value xid=&8&&8月&/value&
& & &value xid=&9&&9月&/value&
& & &value xid=&10&&10月&/value&
& & &value xid=&11&&11月&/value&
& & &value xid=&12&&12月&/value&
&&&/series&
&&&graphs&
& & &graph gid=&dh&&
& && &&value xid=&1&&108&/value&
& && &&value xid=&2&&60&/value&
& && &&value xid=&3&&93&/value&
& & &/graph&
& & &graph gid=&lc&&
& && &&value xid=&1&&173&/value&
& && &&value xid=&2&&109&/value&
& && &&value xid=&3&&364&/value&
& & &/graph&
&&&/graphs&
&/chart&复制代码html文件
&html&
&head&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&销售统计&/title&
&script type=&text/javascript& src=&jquery-1.9.1.min.js&&&/script&
&script type=&text/javascript&&
function loadXMLDoc(dname)
{
try //Internet Explorer
&&{
&&xmlDoc=new ActiveXObject(&Microsoft.XMLDOM&);
&&}
catch(e)
&&{
&&try //Firefox, Mozilla, Opera, etc.
& & {
& & xmlDoc=document.implementation.createDocument(&&,&&,null);
& & }
&&catch(e) {alert(e.message)}
&&}
try
&&{
&&xmlDoc.async=
&&xmlDoc.load(dname);
&&return(xmlDoc);
&&}
catch(e) {alert(e.message)}
return(null);
}
xmlDoc=loadXMLDoc(&xml/data.xml&);
dh=xmlDoc.getElementsByTagName(&graph&)[0].childN
lc=xmlDoc.getElementsByTagName(&graph&)[1].childN
var dh_db = new Array();
var lc_db = new Array();
for (i=0;i&dh.i++)
&&{
& & dh_db.push(dh[i].childNodes[0].nodeValue);& & & &
for (i=0;i&lc.i++)
&&{
&&lc_db.push(lc[i].childNodes[0].nodeValue);
&&}
&&
//初始化chart
$$$$$$$$$$$$$$$$(function () {
& &
& & $$$$$$$$$$$$$$$$(document).ready(function() {
& && &&&chart = new Highcharts.Chart({
& && && && &chart: {
& && && && && & renderTo: 'container',
& && && && && & type: 'column'
& && && && &},
& && && && &title: {
& && && && && & text: '统计'
& && && && &},
& && && && &xAxis: {
& && && && && & categories: [
& && && && && && &&&'1月',
& && && && && && &&&'2月',
& && && && && && &&&'3月'
& && && && && & ]
& && && && &},
& && && && &yAxis: {
& && && && && & min: 0,
& && && && && & title: {
& && && && && && &&&text: '单位 (套)'
& && && && && & }
& && && && &},
& && && && &legend: {
& && && && && & layout: 'vertical',
& && && && && & backgroundColor: '#FFFFFF',
& && && && && & align: 'left',
& && && && && & verticalAlign: 'top',
& && && && && & x: 100,
& && && && && & y: 70,
& && && && && & floating: true,
& && && && && & shadow: true
& && && && &},
& && && && &tooltip: {
& && && && && & formatter: function() {
& && && && && && &&&return ''+
& && && && && && && && &this.x +': '+ this.y +' 套';
& && && && && & }
& && && && &},
& && && && &plotOptions: {
& && && && && & column: {
& & & && &&&dataLabels: {
& && && && && && && && &enabled: true
& && && && && && &&&},
& && && && && && &&&pointPadding: 0.2,
& && && && && && &&&borderWidth: 0
& && && && && & }
& && && && &},
& && && && &series: [{
& && && && && & name: '东子',
& && && && && & //data: [108, 60, 93]& & //静态时显示正常
& && && && && &data: dh_db&&//[color=Red]这个地方赋值没效果 该如何解决呢[/color]&&
& && && & }, {
& && && && && & name: '刘成',
& && && && && & //data: [173, 109, 364]
& && && && && &data: lc_db&&//这个地方取值失败 要怎么解决呢？？
& && && && &}]& & & & & & & & & & & & & & & &
& & & & & & & & & & & &
& && &&&});
& & });
& &
});
&/script&
&/head&
&body&
&script src=&js/highcharts.js&&&/script&
&script src=&js/modules/exporting.js&&&/script&
&div id=&container& style=&min-width: 400 width:950 height: 400 margin: 0 auto&&&/div&
&/body&
&/html&复制代码
UID256282在线时间 小时积分379帖子离线16883 天注册时间
中级会员, 积分 379, 距离下一级还需 121 积分
问题已解决
Powered byjava实现的highcharts与ajax结合动态实时获取数据更新图表 -
- ITeye技术网站
博客分类：
&!DOCTYPE HTML&&html& &head&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&Highcharts Example&/title&
&script type="text/javascript" src="&
&script type="text/javascript"&
var categories=&%=categories%&;
var data=&%=data%&;
//创建图表
$(document).ready(function() {
chart = new Highcharts.Chart( {
renderTo : 'container',
type : 'bar',
events : {
load : st// 定时器
text : '动物数量统计'
categories : categories,
text : 'name'
text : 'number'
enabled: false
tooltip : {
formatter : function() {
return '' + this.series.name + ': ' + this.y + '';
credits : {
enabled: false
plotOptions : {
series : {
stacking : 'normal'
series : [ {
name : '个',
data : data
//10秒钟刷新一次数据
function st() {
setInterval("getData()", 10000);
//动态更新图表数据
function getData() {
var categories = [];
type: "post",
url: "${pageContext.request.contextPath}/demo/chart_demo.action",
dataType: "json",
success : function(data){
var d = [];
$(data).each(function(n,item){
d.push(item.data);
categories.push(item.categories);
chart.series[0].setData(d);
chart.xAxis[0].setCategories(categories);
&/script& &/head& &body&&script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts.js" charset="utf-8"&&/script&&script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/funnel.js"&&/script&&script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts-more.js"&&/script&
&div id="container" &&/div& &/body&&/html&
没有iteye帐号的朋友想要压缩实例的致邮给我
我的邮箱：
描述: 无密码
下载次数: 273
浏览 17074
shiguili505116
浏览: 24973 次
来自: 北京
很不错感谢分享HighCharts入门示例 - 隔壁老王 - ITeye技术网站
博客分类：
　　这两天有空看了看HighCharts的用法。使用方便、功能强大、界面美观。粘一个小例子，大部分代码来自官网。
&%@ page language="java" contentType="text/ charset=UTF-8"
pageEncoding="UTF-8"%&
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&highcharts使用示例&/title&
&script src="../js/jquery-1.11.1.min.js"&&/script&
&script src="../js/highcharts.js"&&/script&
&script src="../js/modules/exporting.js"&&/script&
&script type="text/javascript"&
function chart1(){
$('#container').highcharts({
type: 'bar'
text: 'Fruit Consumption'
categories: ['Apples', 'Bananas', 'Oranges']
text: 'Fruit eaten'
series: [{
name: 'Jane',
data: [1, 0, 4]
name: 'John',
data: [5, 7, 3]
function chart2(){
var chart = new Highcharts.Chart({
renderTo:'container',//目标容器
type: 'bar'
text: 'Fruit Consumption'
categories: ['Apples', 'Bananas', 'Oranges']
text: 'Fruit eaten'
series: [{
name: 'Jane',
data: [1, 0, 4]
name: 'John',
data: [5, 7, 3]
function chart3(){
var option = new Object();
option.chart = new Object();
option.chart.type="bar";
option.chart.renderTo="container";
option.title={title:"水果的摄入"};
option.xAxis={categories:['苹果','香蕉','桔子'],gridLineWidth:1};
option.yAxis={title:{text:"吃水果的量"},tickInterval:1};
option.series = new Array();
option.series[0] = new Object();
option.series[0].name="张三";
option.series[0].data=[1,3,5];
option.series[1] = new Object();
option.series[1].name="李四";
option.series[1].data=[6,1,5.5];
option.series[2] = new Object();
option.series[2].name="刘能";
option.series[2].data=[3,1,0.3];
var chart = new Highcharts.Chart(option);
$(function () {
//chart1();
//chart2();
&h3 style="text-align:"&highcharts使用示例&/h3&
&div id="container" style="width:100%;height:500border:1"&&/div&
浏览: 2129496 次
来自: 北京
挺好用，常用的命令。
炫oO游侠 写道王哥啊，学习你的资料中，目前已经运行起来了，但 ...
直觉豆豆应该像妈妈多点
这组合不错，生活才鲜活
王哥啊，学习你的资料中，目前已经运行起来了，但是程序经常出错， ...}