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

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

1 个答案: