如何在react-chartjs-2 Line组件中删除点标签?

lvjbypge  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(165)

我正在使用来自react-chartjs-2Line组件,在删除线上的标签时遇到了麻烦。
Line Graph Result
线路选项:

const chartOptions: DeepPartial<
  CoreChartOptions<"line"> &
    ElementChartOptions<"line"> &
    PluginChartOptions<"line"> &
    DatasetChartOptions<"line"> &
    ScaleChartOptions<"line"> &
    LineControllerChartOptions
> = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: false,
    },
  },
  elements: {
    point: {
      radius: 2,
    },
  },
};

字符串
行数据:

const chartData: ChartData<"line", number[], string> = {
    labels: Object.keys(sampleData),
    datasets: [
      {
        label: "Score",
        data: Object.values(sampleData).map(
          (val) => Math.round(val * 100) / 100
        ),
        backgroundColor: "#FF6384",
        borderColor: "#FF6384",
        pointRadius: 1,
        borderWidth: 2,
        tension: 0.1,
      } as ChartDataset<"line", number[]>,
    ],
  };


示例数据:

const sampleData = {
    "2016-08-28": 0.5786274509803921,
    "2016-10-09": -0.5872549019607842,
    "2016-10-10": 0.02058823529411765,
    "2016-11-07": 0.05679738562091504,
}

whitzsjs

whitzsjs1#

找到了隐藏数据点标签的正确配置。它是:

plugins: {
    datalabels: {
        display: false,
    },
}

字符串
找到它在这里为感兴趣的人:Chartjs hide data point labels

相关问题