Автоматическое назначение цветов в chart.js 2.x больше не работает, используется для работы в версии 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>

весь Pie отображается в Gray, если я не укажу цвета вручную; я что-то упускаю? Единственный связанный с этим вопрос - это: Случайные цвета заливки в Chart.js, однако, как объяснялось выше, он отлично работал на 1.x, поэтому кажется странным для меня это больше не работает.

Ответы

Ответ 1

Я считаю, что создание цветовых схем - это целая наука. Для меня имеет смысл, чтобы что-то подобное было исключено из Chart.js, поскольку есть более важные цели, которые необходимо преследовать. Все цвета, используемые в примерах диаграмм в документах, определены явно. И эта двухмесячная проблема содержит категорический ответ члена Chart.js о том, что цвета по умолчанию недоступны в Chart.js 2. Итак, у вас есть три варианта. Первый выбор - сделать несколько цветов самостоятельно. Я думаю, вы бы не задавали вопрос, если бы вы были в чем-то подобном (я знаю, что результаты были бы ужасны, если бы я сделал что-то подобное). Второй вариант - искать цветовые схемы и генераторы цветовых схем онлайн и выбирать те цветовые схемы, которые вам нравятся. Третий и интересный выбор - поискать библиотеку JavaScript, которая может создавать цветовые схемы по желанию. Есть несколько альтернативных вариантов. Хорошим вариантом, доступным по очень разрешительной лицензии, является генератор цветовой палитры. Вы можете увидеть это в действии вдоль 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>

Ответ 2

Я бы на самом деле рекомендовал ChartsJS-Plugin-ColorSchemes. Достаточно просто импортировать его после chartjs, чтобы иметь автоматическую раскраску, но добавление опций позволит вам, например, создавать собственные палитры.

...

  options: {

    plugins: {

      colorschemes: {

        scheme: 'tableau.Tableau20'

      }

    }

  }