Как добавить дополнительную метку в середине каждого бара, используя ChartJS - PullRequest
Новая
       12

Как добавить дополнительную метку в середине каждого бара, используя ChartJS

0 голосов
/ 01 марта 2020

Я пытаюсь добавить процентное значение в середине графика.

В настоящее время у меня есть следующее: enter image description here

Я хотел бы сделать свои графики примерно такими:

Итак, как я могу добавить это процентное значение или любой другой текст в середине столбца, используя диаграмму JS?

Заранее спасибо.

1 Ответ

1 голос
/ 01 марта 2020

Вы можете использовать диаграмму js -plugin-datalabels следующим образом: 

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
        label: "X",
        data: [15, 8, 12],
        backgroundColor: "red"
      },
      {
        label: "Y",
        data: [7, 6, 15],
        backgroundColor: "blue"
      },
      {
        label: "Z",
        data: [6, 12, 10],
        backgroundColor: "green"
      }
    ]
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value, context) => {
          let total = context.chart.data.datasets[context.dataIndex].data.reduce((a, b) => a + b, 0);
          return Math.round(1000 / total * value) / 10 + '%';
        },
        color: 'white'
      }
    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="myChart" width="10" height="5"></canvas>
...