Chart.jsでXが不等間隔の折れ線グラフを描画をした際の線色の変更

Chart.js 2.7.3を使っています。
折れ線グラフの途中でグラフの線色を変更したいと考えております。
Xが不等間隔の折れ線グラフに対応するため、typeはlineではなく、scatterを利用しています。
borderColorにグラフデータ長と同じ長さの色の配列を与えることで、
線色変更を試みておりますが、反映されません。

よろしくお願いいたします。

Javascript
1        var ctx = document.getElementById("myChart");
2        var data = {
3            datasets: [
4                {
5                    fill: false,
6                    backgroundColor: "rgba(75,192,192,0.4)",
7                      borderColor: "rgb(255,0,0)", //グラフ全体が赤く表示→○
8
9                      //borderColor: ['rgb(0,0,0)','rgb(0,0,255)'], //全体が赤く表示される→×
10                      
11                       //全体が赤く表示される→×
12                      /*
13                      borderColor: ['rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
14                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
15                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
16                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
17                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
18                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
19                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
20                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
21                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
22                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
23                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
24                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
25                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
26                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)',
27                                  'rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)'
28                     */
29                   ],
30                    data: data_array_js
31                    showLine: true //不等間隔のXに対応するため
32                }
33            ]
34            var myChart = new Chart(ctx, {
35                //type: 'line', //不等間隔のXに対応するため
36                type: 'scatter',
37                data: data,
38            }
39        );

wwbQzhMkhhgEmhU

2019/01/24 13:19

正確な仕様は分かりませんが、散布図で補間した線の色は変えられないように見えますね。 1箇所でしか変わらないのであれば、色が変わったところで別のグラフにしてしまうくらいしか方法が分かりませんでした。もし、何箇所も変わるということであれば、もしかして点ではなく、範囲で色を変えたいとかではないかと思いました。そういう要件だったら、charts-plugin-annotationというのが使えるかもしれません。 https://github.com/chartjs/chartjs-plugin-annotation#box-annotations ご参考までに。