react-chartjs チャートのデータとオプションが次のように構成されています
var lagData = [{
options: {
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - Whether to show a dot for each point
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Line Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
},
data: {
labels: ['1', '2', '3', '4'],
datasets: [
{
label: 'Current lag',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDashOffset: 0.0,
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,
spanGaps: false,
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
data: [50, 35, 60, 67]
}
]
}
}]
私は自分のコードでそれを使用しています
<Line data={lagData[0].data} options={lagData[0].options} width="600" height="300" />
これは私がライブラリをインポートした方法です
import {Line, Bar} from 'react-chartjs';
import Chart from 'chartjs';
驚くべきことに、データはグラフにプロットされますが、オプションはグラフにまったく影響しません。問題がよくわかりません。フォーマットが間違っているのでしょうか、それとも非常にばかげたものを見逃していますか。
どんな助けでも大歓迎です。
アップデート
に変更import Chart from 'chart.js';
した後import Chart from 'chartjs';
、一部の直接構成showScale, pointDot, showLines
やデータセット オプションの一部はレンダリングされますが、title and legends
まだ表示されません。