2
chart.jsの通りdocumentation境界線と背景の色の配列を指定できます。Chart.js - 各境界線の色が異なるラインチャート
ただし、この次の設定をchart.jsに使用している場合。私はborderColor
とbackgroundColor
の配列値がなぜ機能していないのか理解しようとしています。
私はreact-chartjs-2経由でchart.js 2.6.0を使用しています。これはchart.js v2でサポートされているものではありませんか?
"{
"type": "Line",
"labels": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
"datasets": [
{
"label": "Page Views (This Week)",
"fill": false,
"lineTension": 0.1,
"backgroundColor": [
"rgba(75,192,192, 0.4)",
"rgba(1, 223, 111, 0.4)",
"rgba(75,192,192, 0.4)",
"rgba(1, 223, 111, 0.4)",
"rgba(75,192,192, 0.4)"
],
"borderColor": [
"rgba(75,192,192, 1)",
"rgba(1, 223, 111, 1)",
"rgba(75,192,192, 1)",
"rgba(1, 223, 111, 1)",
"rgba(75,192,192, 1)"
],
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": [
"rgba(75,192,192, 1)",
"rgba(1, 223, 111, 1)",
"rgba(75,192,192, 1)",
"rgba(1, 223, 111, 1)",
"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": [
19615,
37337,
54307,
70944,
87444
]
},
{
"label": "Page Views (Last Week)",
"fill": false,
"lineTension": 0.1,
"backgroundColor": [
"rgba(242, 169, 12, 0.4)",
"rgba(1, 223, 111, 0.4)",
"rgba(242, 169, 12, 0.4)",
"rgba(1, 223, 111, 0.4)",
"rgba(242, 169, 12, 0.4)",
"rgba(1, 223, 111, 0.4)",
"rgba(242, 169, 12, 0.4)"
],
"borderColor": [
"rgba(242, 169, 12, 1)",
"rgba(1, 223, 111, 1)",
"rgba(242, 169, 12, 1)",
"rgba(1, 223, 111, 1)",
"rgba(242, 169, 12, 1)",
"rgba(1, 223, 111, 1)",
"rgba(242, 169, 12, 1)"
],
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": [
"rgba(242, 169, 12, 1)",
"rgba(1, 223, 111, 1)",
"rgba(242, 169, 12, 1)",
"rgba(1, 223, 111, 1)",
"rgba(242, 169, 12, 1)",
"rgba(1, 223, 111, 1)",
"rgba(242, 169, 12, 1)"
],
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(242, 169, 12, 1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
17819,
35785,
52761,
69470,
84987,
104958,
125497
]
}
]
}"
生成されたグラフはこのように見えますが、交互の線分が交互に表示されることが予想されました。