我的Highchart即使它们具有不同的值也不显示分散的条形图。出了什么问题？
我的JSON数据：
[
{
"name":"finwts_main -1",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":1431160907000,
"to":1431160955000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"finwts_main -2",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":1431160966000,
"to":1431160984000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"finwts_main -3",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":1431160994000,
"to":1431161314000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"impr_main -prod",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":1431161334000,
"to":1431171728000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"taxupdt_th -P",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431174835000,
"to":1431175557000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"sp_basic_entities_driver -prod",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431177337000,
"to":1431177818000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"basic_main -HYBR",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431177830000,
"to":1431178155000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"basic_main -SUPR",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431178163000,
"to":1431178341000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"basic_main -CESCPI",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431178348000,
"to":1431178484000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"agg_main -HYBR",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431180464000,
"to":1431181001000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"agg_main -CESCPI",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431181008000,
"to":1431181247000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"supr_agg_main -SUPR",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431182033000,
"to":1431183111000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"msa_main -prod",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431181253000,
"to":1431182027000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"sp_est_pop_mars_indx ",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" pm",
"ed_time_am_pm":" pm",
"intervals":[
{
"from":1431183115000,
"to":1431183135000,
"label":"completed",
"color":"#63CA00"
}
]
},
{
"name":"cellrelpr_main -PRICING",
"st_date":"04/9/2015",
"ed_date":"",
"st_time_am_pm":" pm",
"ed_time_am_pm":"",
"intervals":[
{
"from":1431184142000,
"to":1431184142000,
"label":"<b>**processing**</b>",
"color":"#00BFFF"
}
]
},
{
"name":"avgpr_main -F",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":107,
"to":108,
"label":" ",
"color":"#999999"
}
]
},
{
"name":"avgpr_main -U",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":107,
"to":108,
"label":" ",
"color":"#999999"
}
]
},
{
"name":"avgpr_main -M",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":107,
"to":108,
"label":" ",
"color":"#999999"
}
]
},
{
"name":"compstat_main -prod",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":107,
"to":108,
"label":" ",
"color":"#999999"
}
]
},
{
"name":"sp_est_pop_mars_calc - ",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":107,
"to":108,
"label":" ",
"color":"#999999"
}
]
},
{
"name":"sp_est_pop_effect_dissem - ",
"st_date":"04/9/2015",
"ed_date":"04/9/2015",
"st_time_am_pm":" am",
"ed_time_am_pm":" am",
"intervals":[
{
"from":107,
"to":108,
"label":" ",
"color":"#999999"
}
]
}
]
以下演示：
$(function() {
//split time record for yAxsis
var timeforchartandgrid = '';
function timsesubstringforXaxis(timechart) {
var res = timechart;
// var dateres = timechart.substring(0, 10);
var timeArray = res.split(':');
var hours = timeArray[0];
var minutes = timeArray[1];
var secnds = timeArray[2];
if (hours == 12) {
hours = 12;
} else if (hours > 12) {
hours = '0' + hours % 12;
} else {
hours = hours;
}
timeforchartandgrid = hours + ':' + minutes + ':' + secnds;
return timeforchartandgrid;
}
//,{"name" :"avgpr_main -F","st_date" :"10/1/2014","ed_date" :"10/1/2014","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 53865000,"to": 54006000,"label": "completed","color" : "#63CA00"}]}
var arraylist = '[{"name" :"finwts_main -1","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431160907000,"to": 1431160955000,"label": "completed","color" : "#63CA00"}]},{"name" :"finwts_main -2","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431160966000,"to": 1431160984000,"label": "completed","color" : "#63CA00"}]},{"name" :"finwts_main -3","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431160994000,"to": 1431161314000,"label": "completed","color" : "#63CA00"}]},{"name" :"impr_main -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 1431161334000,"to": 1431171728000,"label": "completed","color" : "#63CA00"}]},{"name" :"taxupdt_th -P","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431174835000,"to": 1431175557000,"label": "completed","color" : "#63CA00"}]},{"name" :"sp_basic_entities_driver -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431177337000,"to": 1431177818000,"label": "completed","color" : "#63CA00"}]},{"name" :"basic_main -HYBR","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431177830000,"to": 1431178155000,"label": "completed","color" : "#63CA00"}]},{"name" :"basic_main -SUPR","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431178163000,"to": 1431178341000,"label": "completed","color" : "#63CA00"}]},{"name" :"basic_main -CESCPI","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431178348000,"to": 1431178484000,"label": "completed","color" : "#63CA00"}]},{"name" :"agg_main -HYBR","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431180464000,"to": 1431181001000,"label": "completed","color" : "#63CA00"}]},{"name" :"agg_main -CESCPI","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431181008000,"to": 1431181247000,"label": "completed","color" : "#63CA00"}]},{"name" :"supr_agg_main -SUPR","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431182033000,"to": 1431183111000,"label": "completed","color" : "#63CA00"}]},{"name" :"msa_main -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431181253000,"to": 1431182027000,"label": "completed","color" : "#63CA00"}]},{"name" :"sp_est_pop_mars_indx ","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" pm","ed_time_am_pm" :" pm","intervals": [{ "from": 1431183115000,"to": 1431183135000,"label": "completed","color" : "#63CA00"}]},{"name" :"cellrelpr_main -PRICING","st_date" :"04/9/2015","ed_date" :"","st_time_am_pm" :" pm","ed_time_am_pm" :"","intervals": [{ "from": 1431184142000,"to": 1431184142000,"label": "<b>**processing**</b>","color" : "#00BFFF"}]},{"name" :"avgpr_main -F","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"avgpr_main -U","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"avgpr_main -M","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"compstat_main -prod","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"sp_est_pop_mars_calc - ","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]},{"name" :"sp_est_pop_effect_dissem - ","st_date" :"04/9/2015","ed_date" :"04/9/2015","st_time_am_pm" :" am","ed_time_am_pm" :" am","intervals": [{ "from": 107,"to": 108,"label": " ","color" : "#999999"}]}]';
var tasks = jQuery.parseJSON(arraylist);
var series = [];
var categories = [];
//alert(tasks[i].st_time_am_pm);
$.each(tasks.reverse(), function(i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
color: interval.color,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]);
}
});
series.push(item);
});
//try catch block 2
// // restructure the milestones
// $.each(milestones, function (i, milestone) {
// var item = Highcharts.extend(milestone, {
// data: [[
// milestone.time,
// milestone.task
// ]],
// type: 'scatter'
// });
// series.push(item);
// });
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
//message_for_expected_finish_time
},
subtitle: {
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
//type: 'timepicker',
tickInterval: 1000 * 60 * 60 * 12,
labels: {
style: {
color: '#525151',
font: '14px Arial',
fontWeight: 'bold'
},
formatter: function() {
var mycharttime = Highcharts.dateFormat('%H:%M:%P', this.value);
return timsesubstringforXaxis(mycharttime);
}
},
maxPadding: 0.2,
//min: start_chart_scale_dt,
// max: end_chart_scale_dt,
// minTickInterval:200
title: {
// text: displayMonthXaxiesTitle,
align: 'low'
}
},
yAxis: {
tickInterval: 1,
labels: {
style: {
color: '#525151',
font: '14px Arial',
fontWeight: 'bold'
},
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Job Task Names'
},
maxPadding: 0.1
},
legend: {
enabled: false
},
txooltip: {
crosshairs: [false, true],
formatter: function() {
//if label is undefined
//if (isNaN(this.point.options.label)) {
// return ;
//};
// if (this.series.data[0].label == "not started") {
// return '<b>Job Name: </b>' + tasks[this.y].name + '<br/>' +
// '<b>Job Status: </b>' + this.point.options.label + '<br/>';
// };
//tool tip for processing job
if (this.series.data[0].label == "not started") {
return '<b>Job Name: </b>' + tasks[this.y].name + '<br/>' +
'<b>Job Status: </b>' + this.series.data[0].label + '<br/>';
};
if (this.series.data[0].label == "<b>**processing**</b>") {
return '<b>Job Name: </b>' + tasks[this.y].name + '<br/>' +
'<b>Job Status: </b>' + this.series.data[0].label + '<br/>';
};
//tool tip for completed job
if (this.series.data[0].label == "completed") {
var testgridst = Highcharts.dateFormat('%H:%M', this.point.options.from) + ' ' + tasks[this.y].st_time_am_pm;
var testgrided = Highcharts.dateFormat('%H:%M', this.point.options.to) + ' ' + tasks[this.y].ed_time_am_pm;;
return '<b>Job Name: </b>' + tasks[this.y].name + '<br/>' +
'<b>Job Status: </b>' + this.series.data[0].label + '<br/>' +
'<b>Job Start Time: </b>' + testgridst + '<br/>' +
'<b>Job End Time: </b>' + testgrided; // +' ' + tasks[this.y].ed_time_am_pm;
};
}
},
plotOptions: {
line: {
turboThreshold: 6000000,
lineWidth: 8,
//color: jb_selected_color,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
exporting: {
enabled: false
},
series: series,
animation: {
duration: 6000
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
这是我的JSFiddle。