Javascript Chartjs 2-顶部带有标记的堆叠条

我试图建立一个顶部有标记的堆叠条形图

应该是什么样子

因此，我尝试构建一个条形图，并将其与折线图相结合，但效果并不理想

我目前的成绩

有没有办法得到类似的结果

var chartData =  {
    labels: ["Zukauf", "Produktion"],   
    datasets: [ 
        {
            label: "offene TP",
            data: [102, 55],
            backgroundColor: "rgba(15,173,25,1)",   
            hoverBackgroundColor: "rgba(15,173,25,1)"
        },{
            label: "erledigte TP",
            data: [256, 55],
            backgroundColor: "rgba(220,111,18,1)",
            hoverBackgroundColor: "rgba(220,111,18,1)"
        },{
            type: "line",
            label: "Plan",
            data: [425],
            backgroundColor: "rgba(255,255,255,0)",
            borderColor: "rgba(0,0,0,0.4)",
            borderWidth: 2,

            hoverBackgroundColor: "rgba(12,128,133,1)"
        }
    ]

};  

---

在chartjs文档中进行了一些令人困惑的研究之后，我找到了完美的解决方案

只需将“pointStyle”更改为“line”，将“pointRadius”更改为线条宽度，并禁用“showLine”

var chartData =  {
    labels: ["Zukauf", "Produktion"],   
    datasets: [ 
        {
            label: "offene TP",
            data: [102, 55],
            backgroundColor: "rgba(220,111,18,1)",
            hoverBackgroundColor: "rgba(220,111,18,1)"
        },{
            label: "erledigte TP",
            data: [256, 55],
            backgroundColor: "rgba(15,173,25,1)",   
            hoverBackgroundColor: "rgba(15,173,25,1)"

        },{
            label: "Plan",
            data: [425, 500],
            borderColor: "rgba(0,0,0,1)",

            //important settings

            //set the width of the line ( or point )
            pointRadius: 50,
            // don´t show line betrween points
            showLine: false,
            //change points of line chart to line style ( little bit confusin why it´s named point anyway )
            pointStyle: 'line',

            //chart type
            type: "line",
        }
    ]

};