web-dev-qa-db-ja.com

ChartJS-データポイントごとに異なる色

折れ線グラフのデータポイントに特定の値を超えた場合に別の色を設定する方法はありますか？

私はdxChartのこの例を見つけました- https://stackoverflow.com/a/24928967/949195 -そしてChartsJSに似たものを探しています

javascriptangularjslinechartchart.js
19
Xander

chartjs 2.0については、次の回答を参照してください。

以下の元の答え。

ChartJSに関する良い質問です。私も同じようなことをしたいと思っていました。つまり、点の色を動的に別の色に変更します。以下を試してみましたか。試してみたところ、うまくいきました。

これを試して：

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ;

またはこれを試してください：

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

またはこれでさえ：

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

次にこれを行います：

myLineChart.update();

私はあなたのようなものを持つことができると思います。

if (myLineChart.datasets[0].points[4].value > 100) {
    myLineChart.datasets[0].points[4].fillColor =  "lightgreen";
    myLineChart.update();
 }

とにかく試してみてください。

7
007

ChartJSのバージョン2.2.2に更新すると、受け入れられた回答が機能しなくなることがわかりました。データセットは、プロパティのスタイル情報を保持する配列を取ります。この場合：

var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: pointBackgroundColors
            }
        ]
    }
});

for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
    if (myChart.data.datasets[0].data[i] > 100) {
        pointBackgroundColors.Push("#90cd8a");
    } else {
        pointBackgroundColors.Push("#f58368");
    }
}

myChart.update();

ChartJSのサンプル、特にこのサンプルを見ると、これが見つかりました。 "異なるポイントサイズの例"

33
JIntro

これが私のために働いたものです（v 2.7.0）、最初にデータセットのpointBackgroundColorとpointBorderColorを配列に設定しなければなりませんでした（必要であれば最初にこの配列を色で塗りつぶすことができます）：

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: [],
                pointBorderColor: [],
            }
        ]
    }
});

次に、ポイントの色を直接サルできます。

  myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  myChart.update();

ポイントを区別するために使用する他のプロパティ：pointStrokeColor（明らかに存在するが、動作するようには見えない）、pointRadius＆pointHoverRadius（整数）、pointStyle（ 'triangle'、 'rect'、 'rectRot'、 「cross」、「crossRot」、「star」、「line」、「dash」）、pointRadiusとpointStyleのデフォルトを把握することはできませんが。

9
braks

新しいバージョン2.0で機能するものを追加するだけです。

の代わりに：

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

私は使用しなければなりませんでした：

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

2.0の変更によるものなのか、折れ線グラフではなく棒グラフを使用しているのかはわかりません。

1
NickA

この方法でmyChartを初期化すると、

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

このコードで線の色を変更する必要があります

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

この方法でmyChartを初期化すると、

myBar = new Chart(ctx).Line(barChartData, {

このコードで線の色を変更する必要があります

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";
0
user3200692