Javascript 如何在条形图中添加自定义文本以及如何在图表js(条形图)中减小y轴上的步长
我正在尝试插入酒吧内的自定义文本,我已经搜索了很多线程,但我没有得到任何解决方案。然后我想减小y轴上的步长。我已附上我的代码Javascript 如何在条形图中添加自定义文本以及如何在图表js(条形图)中减小y轴上的步长,javascript,jquery,chart.js,Javascript,Jquery,Chart.js,我正在尝试插入酒吧内的自定义文本,我已经搜索了很多线程,但我没有得到任何解决方案。然后我想减小y轴上的步长。我已附上我的代码 jQuery( document ).ready(function() { var ctx = document.getElementById('myChart'); if(ctx){ var ctxn = ctx.getContext('2d'); var myChart = new Chart(ctxn, {
jQuery( document ).ready(function() {
var ctx = document.getElementById('myChart');
if(ctx){
var ctxn = ctx.getContext('2d');
var myChart = new Chart(ctxn, {
type: 'bar',
data: {
labels: ['Sale Estimate'],
datasets: [{
label: 'Original Sale Estimate',
data: [4200000],
backgroundColor: '#bcbec0'
}, {
label: 'Final Sale Price',
data: [5000000],
backgroundColor: '#5a00fe'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stacked: true,
// Abbreviate the millions
callback: function(value, index, values) {
return '$' +value / 1e6 + 'M';
}
}
}],
xAxes: [{
// Change here
gridLines : {
display : false
},
barPercentage: 0.8,
barThickness: 84,
stacked: true
}]
}, legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
var roundoffLabel = Math.round(tooltipItems.yLabel);
var millionAft = convertNum(roundoffLabel);
return data.datasets[tooltipItems.datasetIndex].label +': ' + '$' + millionAft;
},labelTextColor: function(tooltipItem, chart) {
return '#000';
}
},
titleSpacing: 5,
backgroundColor: '#ffffff',
titleFontColor : '#000000',
cornerRadius : 0,
xPadding : 10,
yPadding : 10,
mode: 'index'
}
}
});
}
});
给出此输出的当前代码。我需要准确的设计附在上面。我试图减小y轴上的步长,但找不到正确的解决方案
请任何人帮我解决这个问题
您可以使用添加标签 后数据集绘图 并使用 步长
jQuery(文档).ready(函数(){
var maxValue=5200000;
var ctx=document.getElementById('myChart');
如果(ctx){
var ctxn=ctx.getContext('2d');
var myChart=新图表(ctxn{
类型:'bar',
数据:{
标签:[“销售预估”],
数据集:[{
标签:“原始销售估算”,
数据:[3950000],
背景颜色:“#bcbec0”
}, {
标签:“最终销售价格”,
数据:[maxValue],
背景颜色:“#5a00fe”
}]
},
选项:{
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的,
对,,
//缩减百万
回调:函数(值、索引、值){
返回“$”+值/1e6+“M”;
},
步长:1000000,//我还有一个疑问,如何使文本垂直居中于栏中。请参考此图像url