Javascript Highcharts：同一柱状图中的多个部分_Javascript_Highcharts

Javascript Highcharts：同一柱状图中的多个部分

javascript highcharts

Javascript Highcharts：同一柱状图中的多个部分,javascript,highcharts,Javascript,Highcharts,我一直在我的项目中使用Highcharts，它是非常有用的伟大产品但是，我现在有一个自定义要求我有一个休假日历，在这里，我在x轴上显示12个月，在y轴上显示休假天数一个月内可能会有3种类型的叶子：已提交经理批准批准为此，我准备在后端使用3个不同的数组准备数据，并在系列部分中使用这3个数组填充数据，生成图表，一切正常。这里有一个特定的要求，如下所示：让我们假设在一月份，一个人有3套批准的假期：第一盘1月3日至4日第二盘1月9日至13日第三盘1月20日至25日该要求指出，

我一直在我的项目中使用

Highcharts

，它是非常有用的伟大产品

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

我有一个休假日历，在这里，我在

x轴上显示12个月

，在

y轴上显示休假天数

一个月内可能会有3种类型的叶子：

已提交

经理批准

批准

为此，我准备在后端使用3个不同的

数组

准备数据，并在系列部分中使用这3个数组

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

让我们假设在一月份，一个人有3套批准的假期：
第一盘1月3日至4日
第二盘1月9日至13日
第三盘1月20日至25日
该要求指出，在一个单列（单一类型的假期）中，应该有一些分类来表示多组假期，即单列图表可以有多种颜色/宽度，我指的是视觉分类

请看附件中的图片
红色列表示已批准离开，而黄色列表示已提交/经理批准离开
三月的工具提示显示了两组不同的假期，但列高度基本上是假期数量的总和，即（0.5+1=1.5）
如果这两组不同的叶子都有一定的界限，颜色/宽度不同，那么它在视觉上会更吸引人，也会对用户更友好。
我附上下面的代码以供进一步参考

<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' }] }); }

$（文档）.ready（函数（）{ 胼胝叶（）； }); 函数callLeaves（） { var leaveData={“SubmittedLeaves”：[{“LeaveStartDate”：“ 批准的休假天数开始日期：结束日期： ”，“LeaveEndDate”：““LeaveAmount”：0.0，“MonthName”：“一月”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准的休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“二月”，“LeaveId”：null}{“LeaveStartDate”：“ 批准的休假天数开始日期：结束日期： ”，“LeaveEndDate”：““LeaveAmount”：0.0”，“MonthName”：“March”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准的休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“April”，“LeaveId”：null}，{“LeaveStartDate”：批准休假天数开始日期：结束日期：，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“May”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“June”，“LeaveId”：null}，{“LeaveStartDate”：批准休假天数开始日期：结束日期：，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“July”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“August”，“LeaveId”：null}，{“LeaveStartDate”：批准休假天数开始日期：结束日期：，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“九月”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“十月”，“LeaveId”：null}，{“LeaveStartDate”：批准的休假天数开始日期：结束日期：，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“十一月”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准的休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“十二月”，“LeaveId”：null}，“批准的休假天数”[{“LeaveStartDate”：批准休假天数开始日期：结束日期：，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“一月”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“二月”，“LeaveId”：null}，{“LeaveStartDate”：批准休假0.50天开始日期：2017年3月3日结束日期：2017年3月3日批准休假1.00天开始日期：2017年3月20日结束日期：2017年3月20日批准的假期1.00天开始日期：2017年4月18日结束日期：2017年4月18日结束日期：2017年4月18日，假期金额：1.00，月名：2017年5月11日，假期金额：7.00，月名：2017年5月11日“：null}，{”LeaveStartDate:“ 批准休假2.00天开始日期：2017年6月19日结束日期：2017年6月20日 ”，“LeaveEndDate:“2017年6月20日”，“LeaveAmount:”2.00，“MonthName:”六月”，“LeaveId:”null}，{”LeaveStartDate:“ 批准休假天数开始日期：结束日期： ”，“LeaveEndDate:”LeaveAmount:”0.0，“MonthName:”七月”，“LeaveId:”null}，{“LeaveStartDate”：“ 批准的休假天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“August”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准的休假10.00天开始日期：2017年9月18日结束日期：2017年9月29日 ”，“LeaveEndDate”：“2017年9月29日”，“LeaveAmount”：10.00，“MonthName”：“九月”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准的假期0.50天开始日期：2017年10月2日结束日期：2017年10月2日”，“LeaveEndDate”：“2017年10月2日”，“LeaveAmount”：0.50，“MonthName”：“十月”，“LeaveId”：null}，{“LeaveStartDate”：“ 批准的假期天数开始日期：结束日期： ”，“LeaveEndDate”：“LeaveAmount”：0.0，“MonthName”：“十一月”，“LeaveId”：null}{“我