带有虚线的图表js水平条形图

我想以多行显示图表js数据冗长的标签,并且在每个水平条的中心点虚线需要显示在条的中心,并且在每个虚线的末尾应该显示。

var ctx = document.getElementById('myChart1').getcontext('2d');
            
var chart = new Chart(ctx,{
  // The type of chart we want to create
  type: 'horizontalBar',// The data for our dataset
  data: {
      labels: ['Tech mahindra Solutions Technologies Applied sciences','IBM Technologies Ltd.','Infosys Technologies Ltd.','MSC Petroleum Operations','tech Systems & Solutions'],datasets: [{
          label: 'My First dataset',backgroundColor: ["#669911","#119966","#6ee221","#f5f222","#FCCE56"],data: [10,9,8,6,4]
      }]
  },// Configuration options go here
  options: {
      responsive: true,legend: {
          display: false,position: 'top'
      },title: {
          display: true,text: 'Top 5 Companies',fontSize: '20',fontFamily: 'Roboto'
      },tooltips: {
          enabled: false
      },scales: {
          xAxes: [{
              gridLines: {
                  display:false
              },ticks: {
                  beginAtZero:true,min: 0,max: 12,stepSize: 2,callback: function(tick) {
            	      return tick.toString() + 'B';
            	  }
              }
          }],yAxes: [{
              //categoryPercentage: .8,barPercentage: 0.2,gridLines: {
                  borderColor    : '#ccc',fill           : false,pointRadius    : 0,borderDash: [10,4]
              },}]
      },plugins: {
          datalabels: {
              align: 'end',anchor: 'end',borderRadius: 4,color: 'black',formatter: Math.round
          }   
      } 
  },plugins: [{
      beforeInit: function(chart) {
          chart.data.labels.forEach(function(e,i,a) {
              if (/\n/.test(e)) {
                  a[i] = e.split(/\n/);
               }
          });
      }
  }]
});
 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

 <div class="col-md-6">
     <div class="chart-padd">
         <canvas id="myChart1"></canvas>
     </div>
 </div>

我想以多行显示图表js数据冗长的标签,并且在每个水平条的中心点虚线需要显示在条的中心,并且在每个虚线的末尾应该显示。

我想要相同的图表:

带有虚线的图表js水平条形图

z156578453 回答:带有虚线的图表js水平条形图

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3151999.html

大家都在问