Chartjs 2 - 顶部有标记的堆积条

Question

我正在尝试构建一个顶部有标记的堆积条形图。

它应该是什么样子

。

所以我试图建立一个条形图并将其与折线图相结合，但这样做效果不佳。

到目前为止的结果

。

有没有办法获得类似的结果？

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)"
        }
    ]

};  

Answer 1

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

solution picture

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",
        }
    ]

};  

只需要将'pointStyle'更改为'line'，将'pointRadius'更改为行的宽度并禁用'showLine'。