ChartJS/Chartjs-plugin-annotation配列を使用して複数の垂直線を描画する方法は？

Question

"2017-09-21"などの日付を含むmarketingという最初の配列と数字だけを含むamountという配列の2つの配列を指定して複数の垂直線を作成したいと考えています。

ChartJSを使用して折れ線グラフを作成しました。最終的な結果は、このようになりますが、複数の行で表示されます。ここで

は私のコードは次のような二つの配列（marketingとamount）を持って考えると、これまで

annotation: { 
    drawTime: 'afterDatasetsDraw', 
    annotations: [{ 
     type: 'line', 
     mode: 'vertical', 
     scaleID: 'x-axis-0', 
     value: marketing, 
     borderColor: 'green', 
     borderWidth: 1, 
     label: { 
      enabled: true, 
      position: "center", 
      content: amount 
     } 
    }] 
} 

Answer 1

です：

var marketing = ['2017-08-05', '2017-08-12']; 
var amount = [50, 70]; 

あなたが動的に1に基づいてannotations配列を移入/作成することができますそれらの配列の（マーケティング/金額）複数の垂直線を描く：

// populate 'annotations' array dynamically based on 'marketing' 
var annotations = marketing.map(function(date, index) { 
    return { 
     type: 'line', 
     id: 'vline' + index, 
     mode: 'vertical', 
     scaleID: 'x-axis-0', 
     value: date, 
     borderColor: 'green', 
     borderWidth: 1, 
     label: { 
     enabled: true, 
     position: "center", 
     content: amount[index] 
     } 
    } 
}); 

working exampleを参照してください。