web-dev-qa-db-ja.com

chart.js 2.xの自動色割り当ては機能しなくなり、v。1.xで使用されていました

Chart.js 1.xを使用して、円グラフを作成し、色を自動的に割り当てることができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>

v 2.xでも同じことをすれば

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Conservative", "Democratic"],
        datasets: [{
            data: [5, 15],
        }]
    }
});
</script>
</body>

色を手動で指定しない限り、パイ全体がグレーで表示されます。私は何かが欠けていますか？私が見つけた唯一の関連する質問はこれです： Chart.jsのランダムな塗りつぶしの色 ただし、上記で説明したように、1.xで完全に機能したので、私には奇妙に思えますもう。

javascriptchartschart.js
27
Eugenio

配色の作成は、それ自体が科学であると信じています。追求するより重要な目標があるため、そのようなものがChart.jsから除外されているのは理にかなっています。 docs のチャート例で使用されるすべての色は、明示的に定義されています。そして この2か月前の問題 は、Chart.js 2でデフォルトの色を使用できないというChart.jsメンバーからのカテゴリー応答を特徴としています。したがって、3つの選択肢があります。最初の選択肢は、自分でいくつかの色を作ることです。もしあなたがそのようなことをしていたら、あなたは質問をしなかっただろうと思う（[〜＃〜] i [〜＃〜]そのようなことをした）。 2番目の選択肢は、オンラインで配色と配色ジェネレーターを探して、あなたに喜ばれる配色を選ぶことです。 3番目の興味深い選択肢は、カラースキームを自由に作成できるJavaScriptライブラリを探すことです。いくつかの選択肢があります。非常に寛容なライセンスの下で利用できる素敵なものは、 Colour Palette Generator です。 Chart.js 2 こちら に沿って動作しているのを見ることができます。サンプルは以下からも入手できます。

var ctx = document.getElementById("myChart");
var myData = [12, 19, 3, 5, 2, 3];
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"],
    datasets: [{
      label: '# of Votes',
      data: myData,
      backgroundColor: palette('tol', myData.length).map(function(hex) {
        return '#' + hex;
      })
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://raw.githubusercontent.com/google/palette.js/master/palette.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

ライブラリの使用方法は here で説明されています。つまり、次を使用して特定の配色から10色のパレットを作成できます。

var seq = palette('tol-sq', 10);

結果は16進文字列の配列です（例：「eee8d5」）。 Chart.jsが色を必要とする場所で使用するには、上記の例のように、mapを使用して各文字列に「＃」を追加します。

57
xnakos

ChartsJS-Plugin-ColorSchemes をお勧めします。 chartjsの後にインポートするだけで自動カラーリングが可能になりますが、オプションを追加すると、たとえばカスタムパレットを作成できます。

...

  options: {

    plugins: {

      colorschemes: {

        scheme: 'tableau.Tableau20'

      }

    }

  }
7
SARose