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

}; 

のみラインと無効 'showLine' の幅は 'ライン'、 'pointRadius' から 'pointStyle' を変更する必要があります。