【发布时间】：2016-12-21 09:36:20
【问题描述】：
【问题讨论】：
标签： javascript jquery angularjs charts chart.js
【发布时间】：2016-12-21 09:36:20
【问题描述】：
我建议你散点图。在散点图中，您可以绘制多条独立的线。如下图所示。
[示例代码]
var scatterChart = new Chart(ctx1, {
type: 'line',
data: {
datasets: [
{
label: 'Scatter Dataset',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 0,
y: 9
}, {
x: 3,
y: 9
}
]
},
{
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 3,
y: 7
}, {
x: 5,
y: 7
}
]
},
{
label: 'Scatter Dataset',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 5,
y: 5
}, {
x: 10,
y: 5
}
]
},
{
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 10,
y: 3
}, {
x: 13,
y: 3
}
]
}
]
},
options: {
legend : {
display : false
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks : {
beginAtzero :true,
stepSize : 1
}
}],
yAxes : [{
scaleLabel : {
display : false
},
ticks : {
beginAtZero :true,
max : 10
}
}]
}
}
});
像颜色一样休息配置，或者如果您想隐藏 y 轴，请按照您的项目要求进行。
【讨论】：
-
能否提供图表库的网址？
-
@Sanjay Dutt 我们可以为图表中的 x 轴分配日期值吗
编辑对于需要为单个 Y 值显示多个条形的更复杂的情况，此方法无法有效地工作。
我会使用两个数据集的堆叠水平条图表。第一个数据集将是透明的，用于抵消作为您的实际数据的第二个数据集。下面的代码也可以防止工具提示出现在第一个数据集上。
http://codepen.io/pursianKatze/pen/OmbWvZ?editors=1111
[示例代码]
var barOptions_stacked = {
hover :{
animationDuration:10
},
scales: {
xAxes: [{
label:"Duration",
ticks: {
beginAtZero:true,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize:11
},
scaleLabel:{
display:false
},
gridLines: {
},
stacked: true
}],
yAxes: [{
gridLines: {
display:false,
color: "#fff",
zeroLineColor: "#fff",
zeroLineWidth: 0
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize:11
},
stacked: true
}]
},
legend:{
display:false
},
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["1", "2", "3", "4"],
datasets: [{
data: [50,150, 300, 400, 500],
backgroundColor: "rgba(63,103,126,0)",
hoverBackgroundColor: "rgba(50,90,100,0)"
},{
data: [100, 100, 200, 200, 100],
backgroundColor: ['red', 'green', 'blue', 'yellow'],
}]
},
options: barOptions_stacked,
});
// this part to make the tooltip only active on your real dataset
var originalGetElementAtEvent = myChart.getElementAtEvent;
myChart.getElementAtEvent = function (e) {
return originalGetElementAtEvent.apply(this, arguments).filter(function (e) {
return e._datasetIndex === 1;
});
}.graph_container{
display:block;
width:600px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<html>
<body>
<div class="graph_container">
<canvas id="myChart"></canvas>
</div>
</body>
</html>【讨论】：
另一个开源选项是Frappé Gantt
【讨论】：
-
嗨！你能帮我在 Angular 中使用 Frappe 甘特图吗？我卡在 frappe.min.js.Angular 的导入上，不允许我定义 gant = new Gantt()。
你可以试试这个库jQuery.Gantt。它非常有用，并且提供了许多绘制甘特图的选项
【讨论】：
一个简单的解决方案是使用 quickchart.io
quickchart.io 的优秀支持人员非常友好地向我发送了一个示例，其中包含 x 轴上的日期，这与上面的某些答案不同。您可以访问示例here。
如果您想在 Gmail 电子邮件中嵌入甘特图，您首先需要将 HTML 发送到 htmlcsstoimage.com 等服务
【讨论】：
我认为使用 Highcharts 会更容易。 查看their documentation。
当涉及到项目管理图表时，它真的很容易使用。
这里是a JSFiddle link to example usage。
var today = new Date(),
day = 1000 * 60 * 60 * 24,
// Utility functions
dateFormat = Highcharts.dateFormat,
defined = Highcharts.defined,
isObject = Highcharts.isObject;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
Highcharts.ganttChart('container', {
series: [{
name: 'Offices',
data: [{
name: 'New offices',
id: 'new_offices',
owner: 'Peter'
}, {
name: 'Prepare office building',
id: 'prepare_building',
parent: 'new_offices',
start: today - (2 * day),
end: today + (6 * day),
completed: {
amount: 0.2
},
owner: 'Linda'
}, {
name: 'Inspect building',
id: 'inspect_building',
dependency: 'prepare_building',
parent: 'new_offices',
start: today + 6 * day,
end: today + 8 * day,
owner: 'Ivy'
}, {
name: 'Passed inspection',
id: 'passed_inspection',
dependency: 'inspect_building',
parent: 'new_offices',
start: today + 9.5 * day,
milestone: true,
owner: 'Peter'
}, {
name: 'Relocate',
id: 'relocate',
dependency: 'passed_inspection',
parent: 'new_offices',
owner: 'Josh'
}, {
name: 'Relocate staff',
id: 'relocate_staff',
parent: 'relocate',
start: today + 10 * day,
end: today + 11 * day,
owner: 'Mark'
}, {
name: 'Relocate test facility',
dependency: 'relocate_staff',
parent: 'relocate',
start: today + 11 * day,
end: today + 13 * day,
owner: 'Anne'
}, {
name: 'Relocate cantina',
dependency: 'relocate_staff',
parent: 'relocate',
start: today + 11 * day,
end: today + 14 * day
}]
}, {
name: 'Product',
data: [{
name: 'New product launch',
id: 'new_product',
owner: 'Peter'
}, {
name: 'Development',
id: 'development',
parent: 'new_product',
start: today - day,
end: today + (11 * day),
completed: {
amount: 0.6,
fill: '#e80'
},
owner: 'Susan'
}, {
name: 'Beta',
id: 'beta',
dependency: 'development',
parent: 'new_product',
start: today + 12.5 * day,
milestone: true,
owner: 'Peter'
}, {
name: 'Final development',
id: 'finalize',
dependency: 'beta',
parent: 'new_product',
start: today + 13 * day,
end: today + 17 * day
}, {
name: 'Launch',
dependency: 'finalize',
parent: 'new_product',
start: today + 17.5 * day,
milestone: true,
owner: 'Peter'
}]
}],
tooltip: {
pointFormatter: function () {
var point = this,
format = '%e. %b',
options = point.options,
completed = options.completed,
amount = isObject(completed) ? completed.amount : completed,
status = ((amount || 0) * 100) + '%',
lines;
lines = [{
value: point.name,
style: 'font-weight: bold;'
}, {
title: 'Start',
value: dateFormat(format, point.start)
}, {
visible: !options.milestone,
title: 'End',
value: dateFormat(format, point.end)
}, {
title: 'Completed',
value: status
}, {
title: 'Owner',
value: options.owner || 'unassigned'
}];
return lines.reduce(function (str, line) {
var s = '',
style = (
defined(line.style) ? line.style : 'font-size: 0.8em;'
);
if (line.visible !== false) {
s = (
'<span style="' + style + '">' +
(defined(line.title) ? line.title + ': ' : '') +
(defined(line.value) ? line.value : '') +
'</span><br/>'
);
}
return str + s;
}, '');
}
},
title: {
text: 'Gantt Project Management'
},
xAxis: {
currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
}
});#container {
max-width: 800px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>【讨论】：
-
请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。
-
运行代码看看它是如何工作的。该代码是不言自明的。你只需要定义你的数据集和甘特图的时间段