ChartJS 在多数据集图表中显示 2 个值而不是一个值？

问题描述

我试图只显示一个值而不是两个值，我已经尝试了所有方法并且正在关注另一个 StackOverflow 链接，但它一直显示两次，我怎么才能只显示一次值？

下面的代码是我迄今为止尝试过的代码，但我一直在显示 2 个值，我正在尝试实现，因此只显示了 1 个值。我知道这是一个肮脏的解决方法，但我不知道任何其他选择。

import React,{ useEffect,useState } from 'react';
import { Line } from 'react-chartjs-2';
import { useTranslation } from 'react-i18next';
import { tempData } from './LineChartData';

import './LineChart.scss';

type LineChartProps = {
  data?: any;
  options?: any;
};

export const LineChart: React.FC<LineChartProps> = ({ data,options }) => {
  const { t } = useTranslation('components');

  const chartData = data || tempData;

  let newArray: any = [];

  data.datasets.forEach((dataset) => {
    newArray.push({
      ...dataset,poinTradius: 2,data: dataset.data.map((item,index) => {
        return index < dataset.data.length - 1 ? item : null;
      }),});
    newArray.push({
      ...dataset,data: dataset.data,borderDash: [5,5],});
  });

  let newChartData = { datasets: newArray,labels: data.labels };

  chartData.datasets.map((dataset) => {
    dataset.poinTradius = dataset.poinTradius || 1;
    dataset.label = t(dataset.label);
  });

  useEffect(() => {
    const Chart = require('react-chartjs-2').Chart;

    Chart.defaults.global.defaultFontFamily = 'Gotham';
    Chart.defaults.global.defaultFontSize = 12;
  },[]);

  return (
    <div className="line-chart">
      <Line
        options={{
          maintainAspectRatio: false,responsive: true,legend: {
            display: false,},elements: {
            line: {
              fill: false,tension: 0,scales: {
            xAxes: [
              {
                ticks: {
                  fontStyle: 'bold',padding: 20,gridLines: {
                  display: false,],yAxes: [
              {
                ticks: {
                  fontStyle: 'bold',beginAtZero: true,gridLines: {
                  drawBorder: false,...options,}}
        data={newChartData}
      />

      <ul className="legend">
        {chartData.datasets.map((dataset,i) => (
          <li key={i}>
            <span
              style={{ backgroundColor: dataset.backgroundColor }}
              className="legend-color"
            ></span>
            {dataset.label}
          </li>
        ))}
      </ul>
    </div>
  );
};

Example 1 Example 2

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）