2017-02-21 22 views
1

この質問はangle-chartjs 1.1.1についてです。angular-chartJsグラフの背景とハイライトの色を変更します

まず、チャートのホバーカラーを無効にしたかったのです。私はすでにfalseに次のオプションを設定します。

tooltips: { 
    enabled: false 
}, 
hover: { 
    enabled: false 
}, 

これは私がhighlightColor含め私のドーナツグラフの色を変更することを決定した動作しません。色を設定するには、指示文chart-colors="colors"をキャンバスに追加しました。私のスコープに私は次のように追加しました:

$scope.colors = [{ 
    fill: true, 
    backgroundColor: ["#FF6384","#36A2EB"] 
}] 

私はまた、次のことを試してみました:

$scope.colors = [{ 
    fill: true, 
    backgroundColor: "#FF6384" 
},{ 
    fill: true, 
    backgroundColor: "#36A2EB" 
}] 

どちらのコードスニペットが機能していません。彼らは、私のChartを部分的にグレーに変換しますが、指定された色は変換しません。 のみ次のコードは、私のグラフの色を変更:

$scope.colors = ["#FF6384","#36A2EB"] 

これはbackgroundColorが変更されますが、私はあまりにもhighlightColorを変更したいので、このソリューションは私にとって何のオプションではありません。どのようにしてbackgroundColorhightlightColorをチャートのどのように設定することができますか?

答えて

1

を定義しますので、あなたはおそらく、配列に2つの色を追加する必要があることを、前提としています。

colors: [{ 
    backgroundColor: '#FF6384', 
    pointBackgroundColor: '#FF6384' 
}, { 
    backgroundColor: '#36A2EB', 
    pointBackgroundColor: '#36A2EB' 
}], 

したがって、pointBackgroundColorはbackgroundColorではなくチャートの色を変更します。ホバー効果のためにbackgroundColorが必要なので、pointedBackgroundは見えなくなり、背景が前面に来ます。

@Dominik Heimのおかげで、あなたのリンクは大きな助けになりました!

1

完全なコードを入力できますか?それは資格のある答えのためにより簡単になります。

そのhttps://stackoverflow.com/a/28654829/6629704に基づいて、私は解決策を見つけたかもしれない、配列の3番目と4番目の位置がハイライト色に

関連する問題