0
Я нашел обходное решение, чтобы нарисовать диаграмму gantt с линией высоких карт. Было приятно узнать, что мы можем составить диаграмму gantt с потрясающей библиотекой Highcharts, но я хочу применить пользовательские цвета. Возможно, я пробовал все возможности, которые я нашел в API. You can see what I did in my jsfiddleПрименение пользовательских цветов на линии HighCharts?
// Define applications
var applications = [{
name: 'App1',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 0, 5),
to: Date.UTC(2015, 0, 6),
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
color: '#FF4719'
}, {
from: Date.UTC(2015, 0, 12),
to: Date.UTC(2015, 0, 16)
,color: '#2EB82E'
}]
// We can specify a single color of a line
//,color: '#2EB82E'
}, {
name: 'App2',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 0, 7),
to: Date.UTC(2015, 0, 9)
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
,color: '#FFFF19'
}, {
from: Date.UTC(2015, 0, 26),
to: Date.UTC(2015, 1, 6)
,color: '#3366FF'
}]
// We can specify a single color of a line
//,color: '#3366FF'
}, {
name: 'App3',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 1, 20),
to: Date.UTC(2015, 1, 21),
label: 'Incident1'
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
,color: '#E62EB8'
}, {
from: Date.UTC(2015, 2,11),
to: Date.UTC(2015, 2, 13)
,color: '#8A5C2E'
}, {
from: Date.UTC(2015, 2, 19),
to: Date.UTC(2015, 2, 20),
label: 'Incident2'
,color: '#006699'
}, {
from: Date.UTC(2015, 2, 23),
to: Date.UTC(2015, 2, 27)
,color: '#666699'
}]
// We can specify a single color of a line
//,color: '#666699'
}, {
name: 'App4',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 2, 2),
to: Date.UTC(2015, 2, 31)
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
,color: '#339966'
}]
//,color: '#339966'
}];
// re-structure the applications into line seriesvar series = [];
var series = [];
$.each(applications.reverse(), function(i, application) {
var item = {
name: application.name,
data: [],
pointStart: Date.UTC(2015, 0, 1),
pointInterval: 3 * 24 * 3600 * 1000
};
$.each(application.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
color: interval.color
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to,
color: interval.color
});
// add a null value between intervals
if (application.intervals[j + 1]) {
item.data.push(
[(interval.to + application.intervals[j + 1].from)/2, null]
);
}
});
series.push(item);
});
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Deployment Planning'
},
xAxis: {
//startOfWeek: 1,
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%e %b', this.value);
}
}
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (applications[this.value]) {
return applications[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Applications'
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ applications[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.point.options.from) +
' - ' + Highcharts.dateFormat('%Y-%m-%d', this.point.options.to);
}
},
// We can define the color chart to our lines
//colors: ['#B572A7'],
plotOptions: {
series: {
// We can specify a single color of a line
//lineColor: '#303030'
//lineColor: function() {
// return this.point.options.color;
// return '#303030';
\t \t \t //},
},
line: {
lineWidth: 9,
// We can specify a single color of a line
//color: '#B572A7',
// We can't make function(){ ... } to get color for each point.option or juste return a single color !
//color: function() {
// return this.point.options.color;
// return '#B572A7';
\t \t \t //},
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 180px"></div>Я хочу, чтобы задать один цвет для каждого типа данных с массивом дает объекты с именем, значением интервалов и цветом. Как и рис
Любая идея, чтобы сделать это?
Thx
вам понадобится отдельная серия для каждого цвета, который вы хотите. – jlbriggs
Я не понимаю, вы можете объяснить больше PLZ? –
Я вижу, что вы нашли другое решение, но для ясности: каждая линейка может быть только одного цвета. Таким образом, для каждой строки, которая нуждается в другом цвете, вам нужна отдельная серия для этой строки. – jlbriggs