Question

因此，我正在尝试为我的图表实现以下外观：

这是我当前的图表如下：

这是我的script标签：

    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels_most_forked,
            datasets: [{
                label: '# of Votes',
                data: values_most_forked,
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            layout: {
                padding: {
                    left: 0,
                    right: 50,
                    top: 0,
                    bottom: 0
                },
            }
        }
    });

如何为我的chartjs实现这种外观？欣赏每个答案。

Answer 1

可以通过选项position和align定义图例的位置，如下所示：

options: {   
  legend: {
    position: 'right',
    align: 'start'
  }
  ...

请在下面查看您的修改后的代码。

const labels_most_forked = ['HTML', 'TypeScript', 'Ruby', 'Others', 'JavaScript'];
const values_most_forked = [13, 7, 5, 1, 1];

var myChart = new Chart('myChart', {
  type: 'pie',
  data: {
    labels: labels_most_forked,
    datasets: [{
      label: '# of Votes',
      data: values_most_forked,
      backgroundColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {   
    legend: {
      position: 'right',
      align: 'start'
    }
  }
});

canvas {
  max-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

有什么办法可以自定义我的chartjs

1 个答案: