时间戳

首页 > 解决方案 > 如何在 Chart js 2 折线图中的点上显示 X 和 Y 标签

reactjs - 如何在 Chart js 2 折线图中的点上显示 X 和 Y 标签

问题描述

当我悬停一个点时，我在 React js 中使用 chartjs 2 制作了 X 和 Y 轴的折线图，我想在框中同时显示 x 和 y 轴，但我只有 X 轴 这是代码。我用过散点图​​。我希望折线图点悬停与散点图相同。请检查并让我知道解决方案

<Line
  options={{
    title: {
      display: true,
    },
    legend: {
      display: false,
    },
    responsive: true,
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'index',
      intersect: false,
    },

    elements: {
      line: {
        fill: false,
        borderWidth: 5,
      },
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: 'black',
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 },
          ].map((z) => {
            return z.y;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: 'black',
            fontStyle: 'bold',
            labelString: 'True Positive Rate',
          },
        },
      ],
      xAxes: [
        {
          ticks: {
            fontColor: 'black',
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 },
          ].map((z) => {
            return 'X-axis' + z.x;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: 'black',
            fontStyle: 'bold',
            labelString: 'False Positive Rate',
          },
        },
      ],
    },
  }}
  height={150}
  data={{
    datasets: [
      {
        fill: false,

        borderColor: '#EC932F',
        backgroundColor: '#212F3D',
        pointBorderColor: '#B2BABB',
        pointBackgroundColor: '#D4AC0D',
        pointHoverBackgroundColor: '#D4AC0D',
        pointHoverBorderColor: 'black',

        lineTension: 0.1,
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',

        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBorderWidth: 2,
        pointRadius: 3,
        pointHitRadius: 10,

        data: [
          { x: 80, y: 90 },
          { x: 81, y: 29 },
          { x: 56, y: 36 },
          { x: 55, y: 25 },
          { x: 40, y: 18 },
        ],
      },
    ],
  }}
/>

标签： reactjschartschart.jslinechartreact-chartjs-2

解决方案

试试这个，

<Line
  options={{
    title: {
      display: true
    },
    legend: {
      display: false
    },
    responsive: true,
    tooltips: {
      mode: "index",
      intersect: false,
      callbacks: { //Added callbacks for label
        title: () => {
          return "";
        },
        label: (tooltipItems, data) => {
          return "(" + tooltipItems.xLabel + "," + tooltipItems.yLabel + ")";
        }
      }
    },
    hover: {
      mode: "index",
      intersect: false
    },

    elements: {
      line: {
        fill: false,
        borderWidth: 5
      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: "black"
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 }
          ].map((z) => {
            return z.y;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: "black",
            fontStyle: "bold",
            labelString: "True Positive Rate"
          }
        }
      ],
      xAxes: [
        {
          ticks: {
            fontColor: "black"
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 }
          ].map((z) => {
            return z.x; // Changed this line
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: "black",
            fontStyle: "bold",
            labelString: "False Positive Rate"
          }
        }
      ]
    }
  }}
  height={150}
  data={{
    datasets: [
      {
        fill: false,
        borderColor: "#EC932F",
        backgroundColor: "#212F3D",
        pointBorderColor: "#B2BABB",
        pointBackgroundColor: "#D4AC0D",
        pointHoverBackgroundColor: "#D4AC0D",
        pointHoverBorderColor: "black",
        lineTension: 0.1,
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBorderWidth: 2,
        pointRadius: 3,
        pointHitRadius: 10,
        data: [
          { x: 80, y: 90 },
          { x: 81, y: 29 },
          { x: 56, y: 36 },
          { x: 55, y: 25 },
          { x: 40, y: 18 }
        ]
      }
    ]
  }}
/>

推荐阅读