1

我在让图例显示在我的反应仪表板中的几个图表上时遇到了一些困难。我正在使用 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';
                  }
                },
              }]
            }
          }}
        />

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

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

4

2 回答 2

2

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

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

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>

于 2021-01-22T12:26:13.293 回答
1

即使已经给出了答案，我想给出没有defaults命名空间选项的替代解决方案。

我们可以使用reactjsplugins中的命名空间来实现它。

 <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,
            },
          },
        },
      }}
    />
于 2021-08-19T07:45:16.440 回答