二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
爱自由,反独裁,反专制,倡导言论自由.新闻自由.拒绝洗脑.独立思想者,坚信思想是个好东西,它会要了独裁的命...........
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
12345678910111213141516171819202122232425262728293031323334353637383940414243&!doctype html&&html lang="en"&&head&&&&&&meta charset="utf-8"&&&&&&script type="text/javascript" src="/ajax/libs/jquery/1.9.0/jquery.min.js"&&/script&&&&&&script type="text/javascript" src="/highcharts.js"&&/script&&&&&&script type="text/javascript"&&&&&&&&&&&&&var options = {&&&&&&&&&&&&chart: {&&&&&&&&&&&&&&&&renderTo: 'container',&&&&&&&&&&&&&&&&type:'spline'&&&&&&&&&&&&},&&&&&&&&&&&&xAxis: {&&&&&&&&&&&&&&&&tickInterval: 5,&&&&&&&&&&&&&&&&categories:[' 00:00:00',' 00:00:10',' 00:00:20',' 00:00:30',' 00:00:40',' 00:00:50',' 00:01:00',' 00:01:10',' 00:01:20',' 00:01:30',' 00:01:40',' 00:01:50',' 00:02:00',' 00:02:10',' 00:02:20',' 00:02:30',' 00:02:40',' 00:02:50',' 00:03:00',' 00:03:10',' 00:03:20',' 00:03:30',' 00:03:40',' 00:03:50',' 00:04:00'],&&&&&&&&&&&&&&&&labels:{&&&&&&&&&&&&&&&&&&&&x:45,//调节x偏移&&&&&&&&&&&&&&&&&&&&//y:-35,//调节y偏移&&&&&&&&&&&&&&&&&&&&//rotation:25//调节倾斜角度偏移&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&},&&&&&&&& &&&& series: [{&&&&&&&&&&&&&&&&data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]&&&&&&&& &&&& }],&&&&&&&& &&&& legend :{ &&&&&&&&&& &&&&&&&&align: 'right',&&&&&&&&&&&&&&&&verticalAlign: 'top',&&&&&&&&&&&&&&&&x: -10,&&&&&&&&&&&&&&&&y: 50,&&&&&&&&&&&&&&&&floating: true&&&&&&&&&&&&&&}&&&&&&&&};&&&&&&&&&$(document).ready(function(){&&&&&&&&&&&&var chart = new Highcharts.Chart(options);&&&&&&&&&&&&&&&&});&&&&&/script&&/head&&&body&&&&&&div id="container"&&/div&&/body&&/html&另外，还可以通过调整x轴文字显示倾斜度或者是截断文字来解决上述问题http://www.52wulian.org/highcharts-tickinterval/
阅读(5254)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'如何处理Highcharts X轴数据过多时显示问题',
blogAbstract:'一、问题描述假如我需要绘制X轴为具体时间、Y轴为数量的曲线图，实现效果如下',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:6,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'爱自由,反独裁,反专制,倡导言论自由.新闻自由.拒绝洗脑.独立思想者,坚信思想是个好东西,它会要了独裁的命...........',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{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}其他回答(1)
是我json数据的问题。。。。不能出来两种x轴的数据。。。
&&&您需要以后才能回答，未注册用户请先。扫描二维码用手机看文章HighCharts实现多数据折线图分列显示 - 推酷
HighCharts实现多数据折线图分列显示
HighCharts实现多数据 折线图 分列显示
HighCharts是一个非常好用的web端画图插件，用起来非常方便，它的官方支持非常好，而且有中文API（不完全），画出来的图像也挺漂亮的。最近需要用HighCHarts绘制多数据展示对比的折线图，要求的效果类似下图。
这个图的特点是Y轴从大到小显示，多个X轴对应多个不同的折线，且每个X轴的刻度不同，每条折线的颜色也不同，且折线不交叉。
在官方的在线演示里找了许久，并没有发现可以实现这样效果的例子，虽然有多轴多折线显示的例子，但是折线会交叉，不满足要求。估计是这样的效果很少会被用到，所以演示里面没有。遂去查找API，API里也没有发现类似的设置（可能是个人疏忽没有找到，如果有朋友知道如何实现的话望留言告知，谢谢）。
我最后采用了拼接的方式实现这个效果，大概原理就是对每一条折线单独作图，最后将所有画板左右结合实现上图的效果。
具体用法如下：
1.为画图准备好数据，根据API中对数据的要求（
）将数据做如下处理。
//获取并处理数据成HighChart可用的结构
function ShowFluidProporties(wellID) {
var arrayALL = [];//装载所有折线
$.post('Ajax/GetFluidProportiesHandler.ashx', { WellID: wellID },
function (data) {
var json = eval('(' + data + ')');
var rows = json.
var tempPoint = [];//临时装载每个点中的X,Y值
var tempLine = [];//临时装载每条折线中的所有点
for (var j = 0; j & arrayTitle. j++) {
for (var i = 0; i & json. i++) {
//制造点数据
tempPoint.push(Number(rows[i][arrayTitle[j]]), Number(rows[i].SamplingWellDepth));
//为折线添加点
tempLine.push(tempPoint);
//清空临时点
tempPoint = [];
//将折线添加到折线集合里
arrayALL.push(tempLine);
//清空临时折线
tempLine = [];
//利用折线集合作图
if (arrayALL) ShowLines(arrayALL);
函数中的data是在服务器获取的，适用于EasyUI中datagrid的json字符串。
其中的arrayTitle在函数前定义。
//需要显示的数据列的列名集
var arrayTitle = ['Density', 'ECD', 'Viscosity', 'R600', 'R300', 'R200', 'R100', 'R6', 'R3'];
2.由于每条折线大体上是差不多的，所以为折线图设置一个通用属性，我只做了简单注释，具体用法详见API。
//折线图的画图属性
var options = {
renderTo: '',//折线位置
type: 'line',//表明是折线图
spacingTop: 25, //图框离上方控件的距离
spacingBottom: 10,//图框离下方控件的距离
marginLeft: 0, //折线图的左边距
marginRight: 0//折线图的右边距
title: { text: '' }, //折线图的标题
credits: { enabled: false }, //是否显示版权信息
plotOptions: {
enabled: false//是否显示点标记
lineColor: '', //边框线颜色
tickColor: '', //刻度线颜色
maxPadding: 0.2,//折线最大处距离刻度线的距离相对于刻度线长度的比值
minPadding: 0.2,//折线最小处距离刻度线的距离相对于刻度线长度的比值
gridLineWidth: 1,//网格线宽度
minorTickInterval: 'auto', //小刻度的间隔
minorTickLength: 5, //小刻度的长度
minorTickWidth: 1, //小刻度的宽度
minorTickColor: '', //小刻度的颜色
endOnTick: true, //是否以刻度结束
title: {//指定X轴的标题
fontWeight: &bold&,
fontSize: '10pt'
lineColor: '#000',
lineWidth: 1,
tickColor: '#000',
tickLength: 5,
tickWidth: 1,
min: 0,//设置最小刻度的值
maxPadding: 0.01,
minPadding: 0.1,
gridLineWidth: 1,
reversed: true,//是否翻转显示，从大到小
minorTickInterval: 'auto',
title: {//指定y轴的标题
text: '井深',
fontWeight: &bold&,
fontSize: '10pt'
series: [{//折线属性
name: '', //折线名称
color: '',//折线颜色
data: []//折线的点数据
由于每条折线都是单独独立的作图，所以需要对每条折线设置一个单独的颜色，否者全部都是一个颜色就没有对比的效果了。
var setColors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
//var setColors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
//var setColors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
我采用的是多个折线图独立画图的方法，需要为每个图分配一个画图的DIV空间。这里也可以在作图函数里动态生成&div&。
&div style=&width: height: 750 margin: 10 border: 2px #416AA3
margin: 10&&
&div style=&width: 190 height: 700 float:& id=&FluidProporty0&&
&div style=&width: 115 height: 700 float:& id=&FluidProporty8&&
为了达到效果，我需要所有折线左右无缝连接，且只在最左边的折线图中显示Y轴，将折线图的marginLeft属性需要设置为0，便可以将Y轴隐藏，并且和前一个折线图无缝连接。在这里我使用了循环生成折线图的方法。如下
//展示折线，需要参考HighChart的API
function ShowLines(arrayALL) {
for (var i = 0; i & arrayTitle. i++) {
var tempOptions =
if (i == 0) {//左侧第一个折线图
delete tempOptions.chart.marginL//该语句删除属性
tempOptions.chart.marginLeft = 0;
tempOptions.yAxis.title.text = '';
tempOptions.chart.renderTo = 'FluidProporty' +
tempOptions.title.text = arrayTitle[i];
tempOptions.series[0] = {
name: arrayTitle[i],
color: setColors[i],
data: arrayALL[i]
tempOptions.xAxis.lineColor = setColors[i];
tempOptions.xAxis.tickColor = setColors[i];
tempOptions.xAxis.minorTickColor = setColors[i];
//根据折线属性绘制折线
var chart = new Highcharts.Chart(tempOptions);
最后可以得到如下的结果图，基本满足要求。
HighCharts在线演示
HighCharts半中文API文档
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致