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

Question

我在让图例显示在我的 React 仪表板中的几个图表上时遇到了一些困难。我正在使用 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 值只会使 Line/Bar 图表的底部稍微上下移动。

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

Answer 1

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

正常示例，但问题与使用 React Wrapper 相同：

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, 5, 8, 3, 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>

Answer 2

尽管已经给出了答案，但我想提供没有 defaults 命名空间选项的替代解决方案。

我们可以在reactjs.

中使用plugins命名空间来实现

 <Line
      data={{
        labels: ["1", "2", "3", "4", "5", "6"],
        datasets: [
          {
            label: "Primary kVA",
            data: [6, 17, 12, 19, 10, 55, 5, 22, 3, 100, 200, 350],
            fill: false,
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgba(255, 99, 132, 0.2)",
          },
          {
            label: "Redundant kVA",
            data: [12, 23, 33, 55, 22, 300, 100, 200, 350],
            fill: false,
            backgroundColor: "rgb(77, 255, 156)",
            borderColor: "rgb(77, 255, 156,0.73)",
          },
        ],
      }}
      options={{
        plugins: {
          legend: {
            display: true,
            position: "right",
            align: "start",
            labels: {
              usePointStyle: true,
            },
          },
        },
      }}
    />

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

Legend not displaying on Line or Bar chart - React-Chartjs-2

javascript

reactjs

chart.js

react-chartjs-2