Chart.js 使用Chartjs显示混合类型的图例（条形图和线条）

我使用

Chartjs

混合线条数据集制作了一个堆叠的组条形图：

我想通过将第一个项目的图例显示为一条线（而不是显示为一个矩形）来区分它

---

我浏览了，但找不到如何实现我的目标。

我认为唯一的方法是自定义图例（请参阅）

下面是一个例子：

var ctx=document.getElementById（'myChart'）；
变量配置={
类型：'bar'，
选项：{
legendCallback:函数（图表）{
var text=[]；
text.push（“
”）；
var数据=图表数据；
var数据集=data.dataset；
if（datasets.length）{
对于（变量i=0；i”）；
if（数据集[i]。类型=='line'）{
text.push（“”）；
}否则{
text.push（“”）；
}
text.push（数据集[i].label）；
text.push（“”）；
}
}
text.push（“
”）；
返回text.join（“”）；
},
图例：{
显示：假，
},
比例：{
xAxes：[{
类型：“类别”，
id:“轴条”，
}, {
键入：“时间”，
id:“轴时间”，
显示：假，
}, ],
},
},
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的数据集1”，
键入：“行”，
背景色：“0000FF”，
边框颜色：“#0000FF”，
边框宽度：1，
填充：假，
xAxisID：“轴时间”，
[x:1*1*3600 0，y:2124}，{x:1.5*3600，y:12124}，{x:2*3600，y:1630，y:1636}，{x:2.5*3600，y:1*3600，y:1.1*3600，y:1.1*3600，y:2124}，{x:2*3600，y:1630，y:1636}，{x:2.5*3600，y:1.0，y:1.0，y:3600，y:1.0，y:0，y:1.0，y:0，y:1.0，y:1.0，y:1.0，y:1.3万，y:1.0，y:1.0，y:1.0，y:1.3万，y:1.0，y:1.3.3.5*3600，y:1.0，y:{x:6.5*3600，y:3581}，{x:7*3600，y:53}，{x:7.5*3600，y:53}，]
},{
标签：“我的数据集2”，
输入：“酒吧”，
背景颜色：“ff0000”，
边框颜色：“ff0000”，
边框宽度：1，
填充：是的，
xAxisID：“轴条”，
数据：[21242、1636010577、94337、45312、35581、53]
}]
},
};
var myChart=新图表（ctx，配置）；
var legend=myChart.generateLegend（）；
document.getElementById（“图例”）.innerHTML=图例
正文{
字体系列：“Arial”；
}
.集装箱{
利润率：15px自动；
}
#图表{
浮动：左；
宽度：70%；
}
#传奇{
浮动：对；
}
[类别$=“-图例”]{
列表样式：无；
光标：指针；
左侧填充：0；
}
[class$=“-图例”]li{
显示：块；
填充：0 5px；
}
[class$=“-图例”]li.hidden{
文字装饰：线条贯通；
}
[class$=“-图例”]li span{
显示：内联块；
右边距：10px；
宽度：20px；
}
[class$=“-图例”]li span.bar{
高度：10px；
}
[class$=“-图例”]li span.line{
高度：1px；
}
将pointStyle设置为图表数据对象中所需的任意值，如line、rect等

 pointStyle: 'rect'

并在选项中添加以下行

  legend: {
           labels: {
                    usePointStyle: true
                   }
           }

刚刚实现了您的代码，它工作得非常完美。小提琴也很有帮助。