Я хочу нарисовать график, как показано ниже. у меня уже есть диаграммы библиотеки JS в моем проекте, поэтому я могу иметь возможность сделать этот график, используя график JSКак нарисовать диаграмму, как показано ниже, используя диаграмму js
Пожалуйста, сообщите мне Как нарисовать этот граф. если не представляется возможным с диаграммой JS пожалуйста предложить некоторые другие библиотеки
Вы можете использовать Highcharts-нг с угловым, который имеет Гант диаграмму особенность
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'SOTMP Checklist Compliance History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
/* formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}*/
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
highcharts не является открытым исходным кодом. можете ли вы предложить какой-то открытый исходный код? – Arunkumar
, вам, возможно, придется написать директиву, иначе вы можете использовать библиотеку угловой – Sajeetharan
я сделал что-то вроде этого, используя highchart .js – Mox
@mox вы можете поделиться через скрипку – Arunkumar
, вы можете взглянуть на этот вопрос, который я задал много месяцев назад. возможно, вы можете адаптировать это решение к урам. http://stackoverflow.com/questions/35197463/how-to-remove-the-padding-on-the-both-ends-of-the-highchart – Mox