Chart.js線の近くにラベルを組み合わせて表示する

Question

私は結合されたBarLineChartを持っています。ラインの近くにラベルを追加する可能性はありますか（この場合、売上高は2015年から2016年にどれだけ増加しましたか）。

私はそこに希望はいくつかの方法

This is what i have so far

I want this

おかげ

Answer 1

これを行う最も簡単な方法は、チャートを提供して同じチームによって提供さchartjs-plugin-annotationプラグインを使用することです。 js。

グラフを使用して、ラベルを含むことができる任意の線やボックスを描画することができます。残念ながら、プラグインはポイントアノテーションをまだサポートしていないため、ラベルを表示するにはちょっとしたハックを使用する必要がありますが、ラインやボックスは表示されません。

ここでは、プラグインを使用して特定のY値で水平の白線を描画するチャートの例を示します（白は、チャートの背景と混ざり合って見えなくなります）。この行は、ラベルも持つように構成されています。最終的な結果は、目に見える線がないチャート上のテキスト注釈です。

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: ['Jan 21st', 'Feb 21st'], 
    datasets: [{ 
     type: 'line', 
     label: 'B', 
     data: [10, 25], 
     fill: false, 
     borderWidth: 3, 
     borderColor: chartColors.orange, 
     lineTension: 0, 
    }, { 
     type: 'bar', 
     label: 'A', 
     backgroundColor: chartColors.blue, 
     data: [10, 25], 
    }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      beginAtZero: true 
     } 
     }], 
     xAxes: [{ 
     ticks: { 
      min: 'Jan 21st', 
      max: 'Apr 21st', 
     } 
     }], 
    }, 
    annotation: { 
     annotations: [{ 
     type: 'line', 
     mode: 'horizontal', 
     scaleID: 'y-axis-0', 
     value: 18, 
     borderColor: 'white', 
     borderWidth: 0, 
     label: { 
      xAdjust: -50, 
      fontSize: 16, 
      fontColor: 'black', 
      backgroundColor: 'white', 
      content: "+20%", 
      enabled: true 
     } 
     }], 
     drawTime: 'beforeDatasetsDraw' 
    } 
    } 
}); 

これは実際にはcodepenで確認できます。

最後に、アプリケーションにプラグインを含めて、鱗（例えば、パイ/ドーナツ）を使用しないグラフを使用すると、エラーが発生します。これは既知の問題であり、hereと記録されています。

回避策は、これをパイ/ドーナツチャートの設定に追加することです（または、パイ/ドーナツのグローバルデフォルト設定に追加する方が簡単かもしれません）。

scales:{ 
    yAxes: [], 
    xAxes: [] 
},