показать значения чуть выше соответствующего бара - PullRequest
Новая
       22

показать значения чуть выше соответствующего бара

0 голосов
/ 16 октября 2019

Я использую react-chartjs-2 для гистограммы, над которой я работаю. Я нанес данные и для отображения значений над соответствующей полосой, я использовал chartjs-plugin-datalabels, но это значение не отображается прямо над полосой.

Я сделал следующее 

import React from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";
import 'chartjs-plugin-datalabels'

import "./styles.css";

const dataFromApi = [
  "19,250",
  "26,454",
  "36,118",
  "49,325",
  "64,190",
  "109,807"
];

const data = {
  labels: ["2019", "2020", "2021", "2022", "2023", "2024"],
  datasets: [
    {
      backgroundColor: "rgb(47,85,151)",
      hoverBackgroundColor: "rgb(47,85,151)",
      data: dataFromApi.map(value => parseInt(value, 10))
    }
  ]
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Bar
        data={data}
        width={100}
        height={50}
        options={{
          plugins: {
            datalabels: {
              display: true,
              color: "black",
              align: "top",
              offset: 10,
              labels: {
                title: {
                  font: {
                    weight: "bold"
                  }
                }
              },
              formatter(value, context) {
                return `$${
                  context.chart.data.datasets[0].data[context.dataIndex]
                }k`;
              }
            }
          },
          maintainAspectRatio: false,
          legend: {
            display: false
          },
          tooltips: {
            display: false
          },
          scales: {
            xAxes: [
              {
                gridLines: {
                  display: false
                },
                barPercentage: 0.3,
                ticks: {
                  beginAtZero: true
                }
              }
            ],
            yAxes: [
              {
                display: false,
                gridLines: {
                  display: false
                },
                ticks: {
                  display: false,
                  beginAtZero: true
                }
              }
            ]
          }
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вот обходной путь

https://codesandbox.io/s/ecstatic-fire-sroc0

Я хотел, чтобы позиция значений была похожа на бар 2019для всех баров.

1 Ответ

0 голосов
/ 16 октября 2019

Очень трудно установить положение метки с помощью react-chartjs-2. Даже этого нет в документе.

Но я применил некоторую логику для offset, чтобы получить позицию. Надеюсь, что это приведет вас к правильному пути. 

offset: function(obj) {
  // Your logic will come here
  return obj.dataset.data[obj.dataIndex] / 2;
},

Вот демо для вас https://codesandbox.io/s/cool-frog-93btz.

Я бы предложил вам использовать highcharts

https://www.highcharts.com/demo/column-drilldown

Надеюсь, это поможет вам!

...