Javascript 如何实现'；水平'；使用chart.js的条形图和折线图？

很明显，使用竖线，整个混合图表呈现良好效果。但是，当我用

两个X轴和一个Y轴水平
时，只有条形图会出现，而折线图不会出现。我看过其他问题，但没有一个专门讨论过这个问题


同样出于某种原因，我必须为
scales.xAxes
提供
type:'linear'
，其中
id:'maturity'
（如下面的代码所示），否则Y轴上的字符串标签也会作为X轴标签重复


var ctx=document.getElementById（“myChart”）；
让图表=新图表（ctx{
键入：“水平线”，
数据：{
标签：[‘信息安全’、‘资产管理’、‘人力资源安全’、‘物理安全’、‘设备安全’、‘访问管理’、‘审查’、‘策略治理’、‘安全协调’、‘label10’、‘label11’、‘label12’、‘label13’]，
数据集：[{
xAxisID:'符合性'，//X轴1
数据：[25,15,25,25,45,15,25,25,25,25,25,80,80]，
标签：“合规性”，
背景颜色：“3367D6”，
边框颜色：“rgba（105159177,1）”，
类别类别：0.8，
},
{
类型：'行'，//行类型数据集
xAxisID:'到期日'，//X轴2
数据：[4,4,3,3,4,5,4,4,3,3,4,5,4]，
标签：“成熟度阈值”，
背景色：“rgba（247148,30,1）”，
边框颜色：“rgba（247148,30,1）”，
填充：假，
},
{
xAxisID:'到期日'，//X轴2
数据：[2,4,3,2,4,4,3,3,4,5,4,4,3]，
标签：“成熟度级别”，
背景色：#F7941E“，
边框颜色：“rgba（77,20,96,1）”，
类别类别：0.8，
}
]
},
选项：{
回答：是的，
图例：{
对齐：“结束”，
标签：{
usePointStyle:true
},
位置：'顶部'
},
比例：{
雅克斯：[{
字体：“粗体”，
滴答声：{
尺寸：11，
},
网格线：{
显示：假
},
scaleLabel：{
显示：对，
labelString:'域'，
字体：“粗体”，
尺寸：15
}
}],
xAxes：[{
id:“合规性”，
位置：'顶部'，
滴答声：{
beginsAtZero：是的，
分:0,，
步长：25
},
网格线：{
显示：假
},
scaleLabel：{
显示：对，
标签字符串：“符合性%”，
字体：“粗体”，
尺寸：15
}
}, {
id:“到期日”，
类型：'线性'，
位置：'底部'，
滴答声：{
民:1,，
最高：5，
步长：1，
回调：函数（值、索引、值）{
返回'L'+值；
},
字体：“粗体”
},
scaleLabel：{
显示：对，
标签字符串：“成熟度级别”，
字体：“粗体”，
尺寸：15
}
}]
}
}
})
我认为问题在于，它试图使用x轴标签和y轴数据

对于Chart.js v2.x，您可以尝试以对象数组的形式为行提供数据：
[{x:4，y:'Information Security'}，{x:…
，我认为这应该可以

在v3（仍处于beta版）中，没有
水平条
图表类型。相反，有一个新选项
索引
，适用于所有图表类型

以下是如何使用v3实现此功能：


var ctx=document.getElementById（“myChart”）；
让图表=新图表（ctx{
类型：'bar'，
数据：{
标签：[‘信息安全’、‘资产管理’、‘人力资源安全’、‘物理安全’、‘设备安全’、‘访问管理’、‘审查’、‘策略治理’、‘安全协调’、‘label10’、‘label11’、‘label12’、‘label13’]，
数据集：[{
xAxisID:'符合性'，//X轴1
数据：[25,15,25,25,45,15,25,25,25,25,25,80,80]，
标签：“合规性”，
背景颜色：“3367D6”，
边框颜色：“rgba（105159177,1）”，
类别类别：0.8，
},
{
类型：'行'，//行类型数据集
xAxisID:'符合性'，//X轴2
数据：[4,4,3,3,4,5,4,4,3,3,4,5,4]，
标签：“成熟度阈值”，
背景色：“rgba（247148,30,1）”，
边框颜色：“rgba（247148,30,1）”，
填充：假
},
{
xAxisID:'到期日'，//X轴2
数据：[2,4,3,2,4,4,3,3,4,5,4,4,3]，
标签：“成熟度级别”，
背景色：#F7941E“，
边框颜色：“rgba（77,20,96,1）”，
类别类别：0.8，
}
]
},
选项：{
indexAxis:'y'，//这会更改v3中所有数据集的方向
回答：是的，
图例：{
对齐：“结束”，
标签：{
usePointStyle:true
},
位置：'顶部'
},
比例：{
y:{
字体：“粗体”，
滴答声：{
尺寸：11，
},
网格线：{
显示：假
},
scaleLabel：{
显示：对，
labelString:'域'，
字体：{
风格：“粗体”，
尺码：15
}
}
},
合规性：{
位置：'顶部'，
beginsAtZero：是的，
分:0,，
滴答声：{
步长：25
},
网格线：{
显示：假
},
scaleLabel：{
显示：对，
标签字符串：“符合性%”，
字体：{
风格：“粗体”，
尺码：15
}
}
},
成熟度：{
类型：'线性'，
位置：'底部'，
民:1,，
最高：5，
滴答声：{