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

按照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 
    ] 
    } 
] 
}"

生成的图形看起来像这样，我期望交替的线段有替代的颜色。