Chart.js ChartJS 2.9.4 can'；水平条形图上的t叠加线数据

我们有一个问题，我们不能用ChartJS 2.9.4将多个图形类型叠加在一起。我们专门将其缩小到

HorizontalBar

图表类型

我看不出下面的脚本代码有什么问题，但ChartJS坚持在添加任何

line

类型时不显示任何内容。当前的双

水平条

工作正常

同样令人沮丧的是，ChartJS在默认情况下似乎显示为不以任何方式向控制台显示错误或通知信息

解决方案尝试：

• 大量布局的重新排列，包括排序

  数据

  数组
• 确认所有选项和设置
• 将“类型”数据放在不同区域（图表/数据集/数据）
• 阅读大量关于模糊相关问题的堆栈溢出
• 发现系统使用

  'bar'

  而不是

  'horizontalBar'

• 更改“绘图顺序”
• 将其默认设置为“line”，然后将

  HorizontalBar

  设置为异常值（在数据数组中设置）

目标：

代码：

Chart.platform.disableCSSInjection=true；
var ctx=document.getElementById（“historicChart”）；
var historicChart=新图表（ctx{
类型：“水平条”，
数据：{
标签：[“2017年3月”、“2016年3月”、“2015年3月”、“2014年3月”、“2013年3月”、“2012年3月”、“2011年3月”]，
数据集：[
{
键入：“行”，
标签：“访问”，
数据：[“3”、“4”、“1”、“5”、“6”、“0”]，
pointBackgroundColor:“#FFC900”，
点半径：8，
pointStyle:'圆'，
秀行：没错
},
{
标签：“申请人”，
数据：[“2”、“4”、“5”、“8”、“9”、“4”、“3”]，
背景颜色：“436B94”，
边框宽度：0
},
{
标签：“摄入量”，
数据：[“1”、“1”、“0”、“1”、“3”、“0”、“1”]，
背景色：“C40500”，
边框宽度：0
}
]
},
选项：{
比例：{
xAxes：[{
错,，
滴答声：{
步长：1
}
}],
雅克斯：[{
错误：错误
}]
}
}
}
);
随时间变化的申请人和入学人数

---

我如何才能做到这一点？

他们在v3中解决了这个问题，因此升级到这是一个解决方案，另一个是降级到2.8版，在他们的回购协议上的一个git问题中，有人发布了一个解决方案，但它只在2.8版之前有效

V3： 水平条形图已作为一种类型删除，请改用条形图，并在选项中将索引轴设置为

y

例如：

var选项={
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
边框宽度：1
},
{
键入：“行”，
标签：“#个点”，
数据：[7,11,5,8,3,7]，
边框宽度：1
}
]
},
选项：{
索引：“y”
}
}
var ctx=document.getElementById（'chartJSContainer'）.getContext（'2d'）；
新图表（ctx，选项）

谢谢。最终，我们更新到了V3.2版本，并使用新系统替换了水平条形图（Y轴标签），现在可以使用了。如果您可以稍微重新表述您的答案，以使升级成为首选方法（并且删除了
HorizontalBar
图表类型。可以使用更新的选项配置水平条形图）那太好了。谢谢。很高兴听到你在使用v3，但实际上并没有具体说明，因为大多数人指定他们仍在使用v2是因为他们需要尚未更新的插件：）是的，我们找到了插件的解决办法，觉得无论如何更新总是更好的，Q只是想看看我是否错过了2.9.4设置中的一些东西。干杯
<script>
    Chart.platform.disableCSSInjection = true;
    var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: ["Mar 2017","Mar 2016","Mar 2015","Mar 2014","Mar 2013","Mar 2012","Mar 2011"],
                datasets: [
                    {
                        type: "line",
                        label: "Visits",
                        data: ["3", "4", "1", "5", "6","0"],
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: true
                    },
                    {
                        label: "Applicants",
                        data: ["2","4","5","8","9","4","3"],
                        backgroundColor: "#436B94",
                        borderWidth: 0
                    },
                    {
                        label: "Intakes",
                        data: ["1","1","0","1","3","0","1"],
                        backgroundColor: "#C40500",
                        borderWidth: 0
                    }
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        stacked: false,
                        ticks: {
                            stepSize: 1
                        }
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                }
            }
        }
    );
</script>

<div class='graphbox'>
     <h3>Applicants & Intakes over time</h3>
     <canvas id="historicChart"></canvas>
</div>