我想以多行显示图表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数据冗长的标签,并且在每个水平条的中心点虚线需要显示在条的中心,并且在每个虚线的末尾应该显示。
我想要相同的图表: