javascript - Chart.js - 每条边框线具有不同颜色的折线图

Question

根据 chart.js documentation我可以为边框和背景的颜色指定一个数组。

但是，在对 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
   ]
  }
 ]
}"

生成的图形看起来像这样，我希望交替的线段具有不同的颜色。

Answer 1

您将不得不使用两个数据集。

然后对于第二个数据集，你可以这样做:

borderColor: [null, #fff]

在第三个数据集上，您将添加两个 null 等。

来源:https://github.com/chartjs/Chart.js/issues/2430