chart.js 中 x 轴上的双标签

Question

我在反应中使用 chart.js 和 react-chart-2，但我在 x 轴下方有双标签，我该如何防止它。

import 'chartjs-adapter-moment';
import moment from 'moment';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,enter image description here
  LineElement,
  Title,
  Tooltip,
  Legend,
  TimeScale,
} from 'chart.js';
import type { ChartData, ChartOptions } from 'chart.js';
import { Line } from 'react-chartjs-2';
import zoomPlugin from 'chartjs-plugin-zoom';
import { useRef } from 'react';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  TimeScale,
  LineElement,
  Title,
  Tooltip,
  Legend,
  zoomPlugin
);

const dump = [
  {
    time: 1675056240000,
    soc: 62,
  },
  {
    time: 1675056270000,
    soc: 62,
  },
  {
    time: 1675056300000,
    soc: 62,
  },
  {
    time: 1675056330000,
    soc: 62,
  },
  {
    time: 1675056360000,
    soc: 62,
  },
];

let lables: number[] = [];
let values: number[] = [];

dump.map((x, i) => {
  lables.push(x.time);
  values.push(x.soc);
});

const data: ChartData<'line'> = {
  labels: lables,
  datasets: [
    {
      label: 'Soc',
      data: values,
      backgroundColor: '#03c782',
      borderColor: '#03c782',
      borderWidth: 1,
    },
  ],
};

export default function Main() {
  const lineGraphRef = useRef<ChartJS<'line', number[], string>>(null);

  const options: ChartOptions<'line'> = {
    responsive: true,
    animation: false,

    scales: {
      y: {
        ticks: {
          color: 'white',
        },
        type: 'linear',
        display: true,
        position: 'left',
      },
      xAxis: {
        type: 'time',
        ticks: {
          major: {
            enabled: true, // <-- This is the key line
          },
          maxRotation: 45,
          minRotation: 45,
          maxTicksLimit: 12,
          color: 'white',
        },
        display: true,
      },
    },
    datasets: {
      line: {
        pointRadius: 0, // disable for all `'line'` datasets,
        showLine: true,
      },
    },

    hover: {
      mode: 'x',
      // intersect:false,
    },
    onHover: (e: any) => {
      if (lineGraphRef !== null && lineGraphRef.current !== null) {
        lineGraphRef.current.clear();
        lineGraphRef.current.draw();

        const y = e.y;
        const topY = lineGraphRef.current.scales.y.top;
        const bottomY = lineGraphRef.current.scales.y.bottom;
        // console.log(
        //   moment(
        //     lineGraphRef.current.scales.xAxis.getValueForPixel(e.x)
        //   ).format('MMM Do YYYY, h:mm:ss a')
        // );

        let ctx = e.chart.ctx;
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(e.x, 0);
        ctx.lineTo(e.x, bottomY);
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#FFAB50';
        ctx.stroke();
        ctx.restore();
      }
    },

    plugins: {
      legend: {
        labels: {
          color: 'white',
          boxWidth: 13,
        },
      },
      tooltip: {
        enabled: false,
        //intersect: false,
        external: (context) => {
          // console.log("context", context);
        },
      },
      zoom: {
        zoom: {
          // wheel: {
          //     enabled: true
          // },
          drag: {
            enabled: true,
            threshold: 10,
          },
          mode: 'x',
        },
      },
    },
  };
  return (
    <Line
      options={options}
      data={data}
      ref={lineGraphRef}
    />
  );
}

我已经尝试在 xAxis 中显示错误，但它隐藏了我需要的上部标签。 我想删除较低的标签。 我尝试了很多东西，但无法删除它们。 谁能解释为什么标签有两行。

在这里，我提供相同的代码沙箱链接

https://codesandbox.io/s/gifted-cache-6i3lqv?file=/src/styles.css

Answer 1

我得到了答案，在文档中它说我们可以使用任何变量作为轴，但它从 x 开始用于 X 轴，从 y 开始用于 Y 轴。 但是当只有一个参数图表时，它会给出意想不到的结果。 如果有单轴图表，我们必须只使用 x。

scales: {
  y: {
    ticks: {
      color: 'white',
    },
    type: 'linear',
    display: true,
    position: 'left',
  },
  x: {  /// change xAxix to only x
    type: 'time',
    ticks: {
      major: {
        enabled: true, // <-- This is the key line
      },
      maxRotation: 45,
      minRotation: 45,
      maxTicksLimit: 12,
      color: 'white',
    },
    display: true,
  },
},