chart.jsの行のプロット点

Question

私はchart.jsを使って簡単な折れ線グラフをプロットしています。私は私のラインに赤い点を表示したい。例えば、私は1から100までの数字のデータセットとして配列を渡しました。これはchart.jsで可能ですか？

私はその配列を通過し、その配列から偶数の値を取り出し、その配列をデータセットに渡すことができることを理解しています。あなたはこの点について助けてくれる？ここに私のデータセットのコード

であることは、ここで

datasets: [ 
     { 
      label: 'Assay Values', 
      fill: false, 
      lineTension: 0, 
      backgroundColor: "rgba(75,192,192,0.4)", 
      borderColor: "rgba(75,192,192,1)", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderWidth: 1, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(75,192,192,1)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 1, 
      pointHitRadius: 10, 
      data: data.assay_value, 
      spanGaps: false 
     }, 

data.assay_valuesが配列を含む配列である私のデータセットです。 data.assay_valuesと仮定すると

ヘルプのいずれかの種類がはるかに高く評価されるだろう

Answer 1

は、（例えば、[65, 59, 80, 81, 56, 55, 40]用）数字の配列が含まれており、あなただけでも値を表示するチャートを望んでいることを、あなたが処理するために、以下のコードを使用することができますあなたのデータ配列を新しい配列に変換し、偶数だけを保持します。

labelsアレイを作成する必要があることに注意してください。データセットのデータ配列の長さは、グラフのラベルと同じでなければなりません（データ内の各インデックスが対応するラベルインデックスに対応するためです）。

ご質問にlabels配列の詳細が記載されていないため、このコードでは文字列の配列を含むlabelsという配列があることを前提としています。実装でラベルを定義した方法に応じてこれを変更する必要があります。

var evenData = []; 
var newLabels = []; 

data.assay_values.forEach(function(e, i) { 
    // only take the even values 
    if (e % 2 === 0) { 
    evenData.push(e); 
    newLabels.push(labels[i]); 
    } 
}); 

次に、このような新しいラベルとデータ配列を使用するようにchart.jsチャート設定を変更します。

var data = { 
    labels: newLabels, 
    datasets: [{ 
    label: 'Assay Values', 
    fill: false, 
    lineTension: 0, 
    backgroundColor: "rgba(75,192,192,0.4)", 
    borderColor: "rgba(75,192,192,1)", 
    borderCapStyle: 'butt', 
    borderDash: [], 
    borderDashOffset: 0.0, 
    borderWidth: 1, 
    borderJoinStyle: 'miter', 
    pointBorderColor: "rgba(75,192,192,1)", 
    pointBackgroundColor: "#fff", 
    pointBorderWidth: 1, 
    pointHoverRadius: 5, 
    pointHoverBackgroundColor: "rgba(75,192,192,1)", 
    pointHoverBorderColor: "rgba(220,220,220,1)", 
    pointHoverBorderWidth: 2, 
    pointRadius: 1, 
    pointHitRadius: 10, 
    data: evenData, 
    spanGaps: false 
    }] 
}; 

// configure your chart options here 
var options = {}; 

// ctx is a jQuery instance or 2d context of the canvas of where we want to draw the chart. 
var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: options 
});