62,046
社区成员
发帖
与我相关
我的任务
分享highcharts x轴不显示时间 求大神指教
代码
chart = {
// global: {
// useUTC: false
// },
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'spline'
},
title: { text: '实时曲线图' },
credits:{text: ''},
xAxis: {
type: "datetime",
// tickInterval: 5*60 * 1000,
// tickWidth: 1000 * 60 * 30, //刻度的宽度
labels: {
enable: true,
rotation: 90, //旋转,效果就是影响标签的显示方向
//step: 4,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
}
},
//刻度的宽度
lineColor: '#990000',
//自定义刻度颜色
lineWidth: 1,
//自定义x轴宽度
gridLineWidth: 1
//默认是0，即在图上没有纵轴间隔线
// dateTimeLabelFormats: { // don't display the dummy year
// second: '%H:%M:%S',
// minute: '%e. %b %H:%M',
// hour: '%b/%e %H:%M'
// }
},
yAxis:
{
title: {
text: '液位高度'
},
//刻度的宽度
lineColor: '#990000',
//自定义刻度颜色
lineWidth: 1,
//自定义x轴宽度
gridLineWidth: 1,
//默认是0，即在图上没有纵轴间隔线
alternateGridColor: null,
// plotLines: [{
// value: 0,
// width: 1,
// color: '#808080'
// }],
plotBands: [{ // Light air
from: 0,
to: 100,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 100,
to: 200,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 200,
to: 300,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 300,
to: 400,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 400,
to: 500,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 500,
to: 600,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // High wind
from: 600,
to: 700,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + unix_to_datetime(this.x) + '液位高度: ' + this.y + 'mm';
}
},
plotOptions:
{
spline:
{
lineWidth: 4,
states: {
hover:
{
lineWidth: 5
}
},
marker:
{
enabled: false
}
}
},
series:[{"name":"油箱1","data":[[1393251616,555.10],[1393251646,555.60],[1393251676,555.20],[1393251706,555.90],[1393251736,555.70],[1393251767,555.70],[1393251796,555.10],[1393251826,555.70],[1393251856,555.90],[1393251886,555.20],[1393251916,555.20],[1393251946,555.20],[1393251976,555.20],[1393252005,556.10],[1393252036,555.80],[1393252066,556.10],[1393252096,556],[1393252126,556.10],[1393252156,555.10],[1393252186,556.10],[1393252216,555.40],[1393252245,555.60],[1393252275,555.90],[1393252305,555.90],[1393252335,555.60]},{"name":"油箱2","data":[[1393251616,565.10],[1393251646,555.60],[1393251676,555.20],[1393251706,555.90],[1393251736,555.70],[1393251767,585.70],[1393251796,555.10],[1393251826,535.70],[1393251856,555.90],[1393251886,555.20],[1393251916,555.20],[1393251946,555.20],[1393251976,555.20],[1393252005,556.10],[1393252036,555.80],[1393252066,516.10],[1393252096,556],[1393252126,556.10],[1393252156,555.10],[1393252186,596.10],[1393252216,555.40],[1393252245,555.60],[1393252275,555.90],[1393252305,575.90],[1393252335,515.60]}]
};
//
// for (var i = 0; i < message.length; i++)
// {
// chart.series[i] = new Object();
// chart.series[i].name=message[i].name;
// chart.series[i].data=message[i].data;
// }
//chart.redraw();
option=new Highcharts.Chart(chart);
...全文
请发表友善的回复…
发表回复
liumingqiu32 2014-04-08
- 打赏
- 举报
strValue +="'"+DateTi + "',"; 拼接时 单引号要加上
后台js 要加上“[]”
yyl8781697 2014-02-25
- 打赏
- 举报
谁告诉你从ajax取来的数据 格式就没问题了？
如果仅仅从你帖子里面的series的值来看，就是因为data属性中少了一个"]"的闭合标签而导致格式无法识别
导致这种原因很有可能是你后台在拼接json字符串的时候少了闭合标签
还有我在本地测试unix_to_datetime这个函数是没有的，不知道LZ自己的代码里面有没有这个功能函数，如果没有的话 这个函数也是一个错误，会影响tooltip功能
Mirror然 2014-02-25
- 打赏
- 举报
楼上这么远都看到了
guojia2012 2014-02-25
- 打赏
- 举报
数据是jax从后台取来的，json串没有问题
yyl8781697 2014-02-25
- 打赏
- 举报
不知道LZ有没有对javascript进行调试，我发现是你series数据中少了"]"这个方括号
看现在得截图
再给你附上源码
看现在得截图
再给你附上源码
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
var chart = {
// global: {
// useUTC: false
// },
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'spline'
},
title: { text: '实时曲线图' },
credits:{text: ''},
xAxis: {
type: "datetime",
// tickInterval: 5*60 * 1000,
// tickWidth: 1000 * 60 * 30, //刻度的宽度
labels: {
enable: true,
rotation: 90, //旋转,效果就是影响标签的显示方向
//step: 4,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
}
},
//刻度的宽度
lineColor: '#990000',
//自定义刻度颜色
lineWidth: 1,
//自定义x轴宽度
gridLineWidth: 1
//默认是0，即在图上没有纵轴间隔线
// dateTimeLabelFormats: { // don't display the dummy year
// second: '%H:%M:%S',
// minute: '%e. %b %H:%M',
// hour: '%b/%e %H:%M'
// }
},
yAxis:
{
title: {
text: '液位高度'
},
//刻度的宽度
lineColor: '#990000',
//自定义刻度颜色
lineWidth: 1,
//自定义x轴宽度
gridLineWidth: 1,
//默认是0，即在图上没有纵轴间隔线
alternateGridColor: null,
// plotLines: [{
// value: 0,
// width: 1,
// color: '#808080'
// }],
plotBands: [{ // Light air
from: 0,
to: 100,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 100,
to: 200,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 200,
to: 300,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 300,
to: 400,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 400,
to: 500,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 500,
to: 600,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // High wind
from: 600,
to: 700,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + '液位高度: ' + this.y + 'mm';
}
},
plotOptions:
{
spline:
{
lineWidth: 4,
states: {
hover:
{
lineWidth: 5
}
},
marker:
{
enabled: false
}
}
},
series:[{"name":"油箱1","data":[[1393251616,555.10],[1393251646,555.60],[1393251676,555.20],
[1393251706,555.90],[1393251736,555.70],[1393251767,555.70],[1393251796,555.10],[1393251826,555.70],
[1393251856,555.90],[1393251886,555.20],[1393251916,555.20],[1393251946,555.20],[1393251976,555.20],
[1393252005,556.10],[1393252036,555.80],[1393252066,556.10],[1393252096,556],[1393252126,556.10],
[1393252156,555.10],[1393252186,556.10],[1393252216,555.40],[1393252245,555.60],[1393252275,555.90],
[1393252305,555.90],[1393252335,555.60]]},
{"name":"油箱2","data":[[1393251616,565.10],[1393251646,555.60],[1393251676,555.20],
[1393251706,555.90],[1393251736,555.70],[1393251767,585.70],[1393251796,555.10],
[1393251826,535.70],[1393251856,555.90],[1393251886,555.20],[1393251916,555.20],
[1393251946,555.20],[1393251976,555.20],[1393252005,556.10],[1393252036,555.80],
[1393252066,516.10],[1393252096,556],[1393252126,556.10],[1393252156,555.10],
[1393252186,596.10],[1393252216,555.40],[1393252245,555.60],[1393252275,555.90],
[1393252305,575.90],[1393252335,515.60]]}]
};
//
// for (var i = 0; i < message.length; i++)
// {
// chart.series[i] = new Object();
// chart.series[i].name=message[i].name;
// chart.series[i].data=message[i].data;
// }
//chart.redraw();
// option=new Highcharts.Chart(chart);
$('#container').highcharts(chart);
});
</script>
</body>
</html>
yyl8781697 2014-02-25
- 打赏
- 举报
我不是什么大师，我也没用过highcharts这个图表框架
我仅仅是根据你的javascript代码调试情况以及参考官方的Demo和api的基础上 对你的代码进行修改的
guojia2012 2014-02-25
- 打赏
- 举报
谁告诉你从ajax取来的数据 格式就没问题了？
如果仅仅从你帖子里面的series的值来看，就是因为data属性中少了一个"]"的闭合标签而导致格式无法识别
导致这种原因很有可能是你后台在拼接json字符串的时候少了闭合标签
还有我在本地测试unix_to_datetime这个函数是没有的，不知道LZ自己的代码里面有没有这个功能函数，如果没有的话 这个函数也是一个错误，会影响tooltip功能[/quote]大师，你qq多少，详谈
