Как отобразить несколько меток данных на столбчатой ​​диаграмме с накоплением с общим количеством столбцов и встроенных значений на диаграмме - PullRequest
Новая
       4

Как отобразить несколько меток данных на столбчатой ​​диаграмме с накоплением с общим количеством столбцов и встроенных значений на диаграмме

0 голосов
/ 04 апреля 2019

Я пытаюсь отобразить столбчатую диаграмму в виде столбцов с response-chartjs-2.Моя проблема в том, что я могу отображать метки данных для каждого столбца в центре, но не могу отображать общее количество столбцов в верхней части столбца.И я должен показать обе метки

Я пытался написать функцию обратного вызова в опциях оси X, но она не идет сверху гистограммы 

 <Bar
        ref="barchart"
        data={toJS(this.data)}
        width={170}
        height={85}
        options={{


          title: {
            display: true,
            text: this.title,
            position: "bottom",
            padding: 5
          },
          elements: {
            line: {
              fill: false
            }
          },
          legend: {
            display: true,
            position: "bottom",
            labels: {
              fontSize: 10,
              fontStyle: "bold"
            }
          },
          scales: {
            yAxes: [
              {
                display: false,
                gridLines: {
                  display: false
                },
                stacked: true,
                ticks: {
                  beginAtZero: true
                }
              }
            ],
            xAxes: [
              {
                display: true,
                gridLines: {
                  display: false
                },
                maxBarThickness: 50,
                stacked: true,
                ticks: {
                  fontSize: 10
                }
              },
              {
                display: true,
                stacked: true,
                maxBarThickness: 50,
                gridLines: {
                  offsetGridLines: false,
                  display: false
                },
                ticks: {
                  fontColor: "#fff"
                }
              },
              {
                type: "category",
                offset: true,
                position: "top",
                ticks: {
                  fontColor: "black",
                  callback: (value, index, values) => {

                    if (this.data.datasets.length > 1) {

                      return (
                        this.data.datasets[0].data[index] +
                        this.data.datasets[1].data[index]
                      );
                    }
                  }
                },
                gridLines: {
                  display: false
                }
              }
            ]
          },
          maintainAspectRatio: true,
          plugins: {
            datalabels: {
              anchor: "center",
              align: "center"
            },
            afterDraw: (chartInstance, easing) => {
              debugger;
              const ctx = chartInstance.chart.ctx;
              ctx.fillText("This text drawn by a plugin", 100, 100);
            }
          },
          layout: {
            padding: {
              top: 35
            }
          }
        }}
      />
...