图例未显示在折线图或条形图上 - React-Chartjs-2

如何解决图例未显示在折线图或条形图上 - React-Chartjs-2

我在将图例显示在我的反应仪表板中的几个图表上时遇到了一些困难。我正在使用 react-chartjs-2 。图例最初是有效的，然后我测试了在 Chart.default 属性中关闭图例，当我尝试重新打开它时，它们没有重新出现。

我的全局图表设置如下：

// react-chartjs-2 Global Styling 
defaults.global.elements.point.radius = 1;
defaults.global.elements.line.tension = 0.1;
defaults.global.elements.point.hoverRadius = 10;
defaults.global.elements.point.hiTradius = 12;

// Font
defaults.global.defaultFontSize = 12;
defaults.global.defaultFontColor = "#838383";

// Legend
defaults.global.legend.display = true;
defaults.global.legend.align = "start";
defaults.global.legend.position = "bottom";
defaults.global.legend.labels = {
  padding: 30,BoxWidth: 15,};

我的折线图、条形图和圆环图的本地图表属性都遵循类似的布局，即：

        <Line
          data={props.graph.data}
          height={300}
          options={{
            maintainAspectRatio: false,legend: {
              display: true,},scales: {
              xAxes: [{
                gridLines: {
                  display: false
                }
              }],yAxes: [{
                gridLines: {
                  drawBorder: false,ticks: {
                  beginAtZero:true,// Include a kwh sign in the ticks
                  callback: function(value,index,values) {
                      return value + 'kWh';
                  }
                },}]
            }
          }}
        />

如您所见，图例在全局和本地设置中均已启用。目前，只有圆环图显示它的图例。切换 display:true 值只会将折线图/条形图的底部上下移动少量。

有人遇到过类似的问题吗？

解决方法

看起来默认值无法处理传递对象，如果您分别定义图例标签填充和框宽度的默认值，那么它将呈现您的图例。

正常示例，但问题与使用 react 包装器相同：

const defaults = Chart.defaults;

defaults.global.elements.point.radius = 1;
defaults.global.elements.line.tension = 0.1;
defaults.global.elements.point.hoverRadius = 10;
defaults.global.elements.point.hitRadius = 12;

// Font
defaults.global.defaultFontSize = 12;
defaults.global.defaultFontColor = "#838383";

// Legend
defaults.global.legend.display = true;
defaults.global.legend.align = "start";
defaults.global.legend.position = "bottom";
defaults.global.legend.labels.padding = 30;
defaults.global.legend.labels.boxWidth = 15;

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: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

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

canvas { 
 background-color : #eee;
}

<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>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>