Question

我一直在我的项目中使用Highcharts，它非常有用，很棒的产品。

但是，我现在有一个自定义要求。

我有一个休假日历，我在x axis显示了y axis上的12个月和arrays上的天数。

捕获量，一个月内可以有3种类型的叶子：

已提交

经理批准

已批准

为此，我准备在后端使用3个不同<div id="leaveContainer" style="height:200px"></div> $(document).ready(function() { callLeaves(); }); function callLeaves() { var leaveData={"SubmittedLeaves":[{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"January","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"February","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"March","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"April","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"May","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"June","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"July","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"August","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"September","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"October","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"November","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"December","LeaveId":null}],"ApprovedLeaves":[{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"January","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"February","LeaveId":null},{"LeaveStartDate":" Approved Leaves 0.50 day Start Date: 03/03/2017 End Date: 03/03/2017 Approved Leaves 1.00 day Start Date: 20/03/2017 End Date: 20/03/2017 ","LeaveEndDate":"20/03/2017","LeaveAmount":1.50,"MonthName":"March","LeaveId":null},{"LeaveStartDate":" Approved Leaves 1.00 day Start Date: 18/04/2017 End Date: 18/04/2017 ","LeaveEndDate":"18/04/2017","LeaveAmount":1.00,"MonthName":"April","LeaveId":null},{"LeaveStartDate":" Approved Leaves 7.00 days Start Date: 03/05/2017 End Date: 11/05/2017 ","LeaveEndDate":"11/05/2017","LeaveAmount":7.00,"MonthName":"May","LeaveId":null},{"LeaveStartDate":" Approved Leaves 2.00 days Start Date: 19/06/2017 End Date: 20/06/2017 ","LeaveEndDate":"20/06/2017","LeaveAmount":2.00,"MonthName":"June","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"July","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"August","LeaveId":null},{"LeaveStartDate":" Approved Leaves 10.00 days Start Date: 18/09/2017 End Date: 29/09/2017 ","LeaveEndDate":"29/09/2017","LeaveAmount":10.00,"MonthName":"September","LeaveId":null},{"LeaveStartDate":" Approved Leaves 0.50 day Start Date: 02/10/2017 End Date: 02/10/2017 ","LeaveEndDate":"02/10/2017","LeaveAmount":0.50,"MonthName":"October","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"November","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"December","LeaveId":null}],"ManagerApprovedLeaves":[{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"January","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"February","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"March","LeaveId":null},{"LeaveStartDate":" Approved Leaves 1.00 day Start Date: 28/04/2017 End Date: 28/04/2017 ","LeaveEndDate":"28/04/2017","LeaveAmount":1.00,"MonthName":"April","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"May","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"June","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"July","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"August","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"September","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"October","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"November","LeaveId":null},{"LeaveStartDate":" Approved Leaves days Start Date: End Date: ","LeaveEndDate":"","LeaveAmount":0.0,"MonthName":"December","LeaveId":null}]}; displayLeaveDetails(JSON.parse(leaveData)); } function convertToJsonObjectArray(data) { var arrayData = new Array(); $.each(data, function (i) { var objdata = new Object(); if (data[i] != undefined) { objdata.leaveStartDate = data[i]["LeaveStartDate"] objdata.leaveEndDate = data[i]["LeaveEndDate"]; objdata.y = data[i]["LeaveAmount"]; objdata.monthName = data[i]["MonthName"] objdata.leaveId = data[i]["LeaveId"] } arrayData.push(objdata); }); return arrayData; } function displayLeaveDetails(data) { var submittedLeaves = data[0]['SubmittedLeaves']; var managerApprovedLeaves = data[0]['ManagerApprovedLeaves']; var approvedLeaves = data[0]['ApprovedLeaves']; submittedLeaves = convertToJsonObjectArray(submittedLeaves); managerApprovedLeaves = convertToJsonObjectArray(managerApprovedLeaves); approvedLeaves = convertToJsonObjectArray(approvedLeaves); Highcharts.chart('leaveContainer', { chart: { type: 'column' }, title: { text: 'Leaves' }, xAxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], crosshair: true }, yAxis: { min: 0, title: { text: 'Leaves (days)' } }, tooltip: { formatter: function () { return this.point.leaveStartDate; } }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Submitted Leaves', data: submittedLeaves, color: '#FFFF00' }, { name: 'Manager Approved Leaves', data: managerApprovedLeaves, color: '#FFFF00' }, { name: 'Approved Leaves', data: approvedLeaves, color: '#FF0000' }] }); }的数据，并在系列部分中使用这3个数组。

数据被填充，图表生成，一切正常。这里有一定的要求，如下：

假设在1月份，一个人有3套 APPROVED 叶子：

首先设置1月3日至4日

第二套1月9日至13日

第三套1月20日至25日

要求说在一个列（单一类型的假期）中，应该有一些分类来表示多组叶子，即单个柱形图可以有多种颜色/宽度，我的意思是可视化分类它们。

请查看附件图片。

红色列表示已批准离开，而黄色列表示已提交/经理批准离开。

3月份的工具提示显示了两组不同的叶子，但是柱子高度基本上是假期数量的总和，即（0.5 + 1 = 1.5）。

在这里，如果这些不同的树叶都有某种分界，不同的颜色/宽度，那么它在视觉上会更具吸引力，并且也是用户友好的。

我附上以下代码以供进一步参考。

var buildClient = connection.GetClient<XamlBuildHttpClient>();
var defs = buildClient.GetDefinitionsAsync(project: "XXX").Result;

请指导此问题，任何指针或任何替代图表也将有用。

由于

Highcharts：同一列图表中的多个部分

0 个答案: