Chartjs：制作方形图例

问题描述

使用 react-chartjs-2，创建条形图如下。我正在尝试将图例设为方形而不是默认矩形。

我应用 BoxWidth: 10 如下但它不起作用，是否有其他可能的替代方法来生成方形图例

const sample_data = {
  labels: ['Item1','Item2'],datasets: [
    {
      data: [10,10,50],borderWidth: 1,backgroundColor: 'yellow',},{ data: [20,20,20],backgroundColor: 'green' 
    },],};
const sample_options = {
  responsive: true,legend: {
    BoxWidth: 10,// Also 0 doesn't make any change
  },...
};

<Bar data={sample_data} options={sample_options} />;

解决方法

您必须按照文档中的说明将 boxWidth 放在图例选项的标签部分：https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

var options = {
  type: 'line',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
        label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
      },{
        label: '# of Points',data: [7,11,8,7],borderWidth: 1
      }
    ]
  },options: {
    legend: {
      labels: {
        boxWidth: 10
      }
    },scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

react-chartjs react-chartjs-2 reactjs reactjs reactjs reactjs

Chartjs：制作方形图例

问题描述

解决方法

相关问答