如何以正确的顺序设置图表饼图颜色？

Question

我正在处理图表饼图以输入数据，我想为图表饼图的颜色设置正确的顺序，我想让绿色饼图在左侧，蓝色饼图在右侧。

var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  legend:{
    position: 'right'
  },
  
  data: {
    labels: ["Opened", "Clicked"],

    datasets: [{
        data: [
            opened_today,
            clicked_today
        ],
        backgroundColor: [
            "#28a745",
            "#007bff"
        ],
    }],
  },
});

.chartjs-render-monitor {
    animation: chartjs-render-animation 1ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>


<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
    <div class="chart-pie pt-4 pb-2">

      <canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
    </div>
</div>

这是我的图表饼图显示的内容：

当我尝试这个时：

var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Opened", "Clicked"],

    datasets: [{
        data: [
            
            clicked_today,
            opened_today
        ],
        backgroundColor: [
            
            "#007bff",
            "#28a745"
        ],
    }],
  },
});

我得到了这个：

这是我想要实现的目标：

你能告诉我一个例子如何让绿色馅饼在左边，蓝色馅饼在右边吗？

谢谢。

Answer 1

好的，你必须按照顺时针选择你的数据/颜色，首先点击/蓝色然后打开/绿色。

图例的所有设置都必须在 options

键内

对于图例，反向操作

var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  options: {
    legend: {
      reverse:true,
      position: 'top',
      labels: {
        fontColor: 'gray'
      }
    }
  },
  data: {
    labels: ["Clicked","Opened"],
    datasets: [{
      data: [
        clicked_today,
        opened_today,
      ],
      backgroundColor: [
        "#007bff", //blue
        "#28a745", //green,
      ],
    }],
  },
});

.chartjs-render-monitor {
  animation: chartjs-render-animation 1ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>


<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
  <div class="chart-pie pt-4 pb-2">

    <canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
  </div>
</div>