chart.js（または別のライブラリ）を使用した軸参照

Question

このようなグラフを作成しようとしています。 https://www.google.com/finance?q=BCBA:PAMP chart.jsに折れ線グラフがあります。 、C）特定の日付。 開始するドキュメント/例が見つかりません。何か案が？ 他の図書館とのやりとりが簡単なら、歓迎の意を払う必要はありません。 ありがとう！

Answer 1

残念ながら、あなたが望むものについては、chart.jsのネイティブサポートはありません。ただし、プラグインインタフェースを使用してこの機能を追加することは可能です。これには、独自のロジックを実装してキャンバスピクセルを必要な場所に描画する必要があります。それは挑戦的なように聞こえるかもしれませんが、それはより簡単です。

グラフの特定のポイント（設定に基づく）の上に値を追加するプラグインの例を次に示します。

Chart.plugins.register({ 
    afterDraw: function(chartInstance) { 
    if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) { 
     var showOnly = chartInstance.config.options.showDatapoints.showOnly || []; 
     var helpers = Chart.helpers; 
     var ctx = chartInstance.chart.ctx; 
     var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor); 

     // render the value of the chart above the bar 
     ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily); 
     ctx.textAlign = 'center'; 
     ctx.textBaseline = 'bottom'; 
     ctx.fillStyle = fontColor; 

     chartInstance.data.datasets.forEach(function (dataset) { 
     for (var i = 0; i < dataset.data.length; i++) { 
      if (showOnly.includes(dataset.data[i])) { 
      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model; 
      var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight; 
      var yPos = (scaleMax - model.y)/scaleMax >= 0.93 ? model.y + 20 : model.y - 5; 
      ctx.fillText(dataset.data[i], model.x, yPos); 
      } 
     } 
     }); 
    } 
    } 
}); 

この新しい設定を使用して注釈を付けるポイントを設定することができます。 showOnlyオプションには、ラベルを付けるポイントが含まれています。明らかに

options: { 
    showDatapoints: { 
    display: true, 
    showOnly: [3, 10, 9] 
    }, 
} 

、これが唯一の指定された点で、データポイントの値が追加されますが、あなただけではなく、表示したいものは何でもペイントするプラグインを変更することができます。 ctx.fillText(dataset.data[i], model.x, yPos)を別のコードに置き換えて、キャンバス上で異なるものをレンダリングするだけです。

これはあなたのように見えることを示すcodepen exampleです。