Как я могу показать метки и значения в обоих на гистограмме - PullRequest
Новая
       20

Как я могу показать метки и значения в обоих на гистограмме

1 голос
/ 24 апреля 2019

Привет всем, я создаю панель мониторинга, которая содержит гистограмму с использованием Angular 7, chart.js и chartjs-plugin-datalabels как вы можете видеть на рисунке , гистограмма содержит различные наборы данных, каждый из которых имеет свою собственную метку. Я хотел показать метку на каждой из них в верхней части бара и ее значение, но я не знал, как мой код показывает только метку набора данных
я имею в виду то, что вы можете видеть в моем файле кода (.ts) 

this.chartdef= new Chart('defaut',
          {
            type:'bar',

            options:{
              cutoutPercentage:40,
              responsive :true,

              title:{
                display:true,
                text:'TRG VAGUE'
              },
              plugins:{
                datalabels:{
                  align:'top',
                  display: 'true',
                  color:'#ffffff',

                }
              }


            },
            data:{
              labels:['poste1','poste2','poste3'],
              datasets:[
                {
                  label:'REPERTOP01',
                  data:[10,7.5,4.5],
                  backgroundColor:'rgba(255, 0, 0,1)',
                  borderColor:'rgba(255, 0, 0,0.6)',
                  borderWidth:1,
                  fill:false,
                  datalabels: {
                    align: 'end',
                    anchor: 'end',


                    formatter: function(value, context) {
                      return context.chart.data.labels[context.dataIndex];
                    }

                  }

                },
                {
                  label:'REPERTOP02',
                  data:[4.5,0,1],
                  backgroundColor:'rgba(255, 102, 0,1)',
                  borderColor:'rgba(255, 102, 0,0.6)',
                  fill:false,
                  borderWidth:1
                },
                {
                  label:'REPERTOP02',
                  data:[4.5,0,0],
                  backgroundColor:'rgba(255, 225, 0,1)',
                  borderColor:'rgba(255, 225, 0,0.6)',
                  fill:false,
                  borderWidth:1
                }
              ]

            }
          })

и HTML-файл 

<div class="container-fluid">
  <canvas id="defaut" height="40px"  width="100%">

  </canvas>
</div>

У меня есть 3 набора данных, которые я хочу показывать поверх каждого бара его метку, мне нравится REPERTOP01, но этот код показывает мне poste1 поверх бара, а также, если я показываю метку, значение исчезает, так как Могу ли я показать REPERTOP01 вместо poste1 poste2 и poste3 и показать значение с ним внутри бара

1 Ответ

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

Для проблемы с текстовой меткой, вам нужно изменить свой пользовательский форматер, чтобы вместо него возвращалась метка набора данных: 

formatter: function(value, context) {
  return context.chart.data.datasets[context.dataIndex].label;
}

Насколько мне известно, плагин datalabels не поддерживает несколько меток на одну строку.,Вам нужно будет вручную нарисовать одну из меток, выполнив что-то вроде этого SO-ответа: Как отобразить значения данных или метки индекса в ChartJs (последняя версия) .

...