2017-07-11 39 views
2

chart.jsの通りdocumentation境界線と背景の色の配列を指定できます。Chart.js - 各境界線の色が異なるラインチャート

ただし、この次の設定をchart.jsに使用している場合。私はborderColorbackgroundColorの配列値がなぜ機能していないのか理解しようとしています。

私は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 
    ] 
    } 
] 
}" 

生成されたグラフはこのように見えますが、交互の線分が交互に表示されることが予想されました。

enter image description here

答えて

0

あなたは、2つのデータセットを使用する必要があります。第二のデータセットのために、あなたはこのような何か行うことができます

その後:第三のデータセットで

borderColor: [null, #fff] 

を、次の2つのnull年代を追加して、などでしょう

出典:https://github.com/chartjs/Chart.js/issues/2430

関連する問題