{"id":828,"date":"2022-04-23T00:06:15","date_gmt":"2022-04-22T15:06:15","guid":{"rendered":"http:\/\/www.onepage.co.kr\/wordpress\/?p=828"},"modified":"2022-04-23T00:06:15","modified_gmt":"2022-04-22T15:06:15","slug":"statcked-chart-chart-js","status":"publish","type":"post","link":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/2022\/04\/23\/statcked-chart-chart-js\/","title":{"rendered":"statcked chart chart.js"},"content":{"rendered":"
\n
<!DOCTYPE html><\/div>\n
<html lang=”en”><\/div>\n
<head><\/div>\n
<metacharset=”UTF-8″><\/div>\n
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”><\/div>\n
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″><\/div>\n
<title>Document<\/title><\/div>\n
<scriptsrc=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.5.0\/Chart.min.js”><\/script><\/div>\n
<\/div>\n
<\/head><\/div>\n
<body><\/div>\n
<canvasid=”bar-chart”width=”600″height=”350″><\/canvas><\/div>\n
<\/body><\/div>\n
<\/html><\/div>\n
<script><\/div>\n
varnumberWithCommas = function(x) {<\/div>\n
returnx.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, “,”);<\/div>\n
};<\/div>\n
var dataPack1 = [50000, 0, 0,0, 0, 0, 0, 0, 0, 0, 60100, 62000];<\/div>\n
var dataPack2 = [0, 6000, 13000, 14000, 50060, 20030, 20070, 35000, 41000, 4020, 40030, 70050];<\/div>\n
var dates = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];<\/div>\n
\/\/ Chart.defaults.global.elements.rectangle.backgroundColor = ‘#FF0000’;<\/div>\n
var bar_ctx = document.getElementById(‘bar-chart’);<\/div>\n
var bar_chart = new Chart(bar_ctx, {<\/div>\n
type:’bar’,<\/div>\n
data: {<\/div>\n
labels:dates,<\/div>\n
datasets: [<\/div>\n
{<\/div>\n
label:’SoftEnterprises, Sales’,<\/div>\n
data:dataPack1,<\/div>\n
backgroundColor:”rgba(55, 160, 225, 0.7)”,<\/div>\n
hoverBackgroundColor:”rgba(55, 160, 225, 0.7)”,<\/div>\n
hoverBorderWidth:2,<\/div>\n
hoverBorderColor:’lightgrey’<\/div>\n
},<\/div>\n
{<\/div>\n
label:’SmartSystems, Sales’,<\/div>\n
data:dataPack2,<\/div>\n
backgroundColor:”rgba(225, 58, 55, 0.7)”,<\/div>\n
hoverBackgroundColor:”rgba(225, 58, 55, 0.7)”,<\/div>\n
hoverBorderWidth:2,<\/div>\n
hoverBorderColor:’lightgrey’<\/div>\n
},<\/div>\n
]<\/div>\n
},<\/div>\n
options: {<\/div>\n
animation: {<\/div>\n
duration:10,<\/div>\n
onComplete:function(){<\/div>\n
vararr = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]<\/div>\n
varmodel_y, gap<\/div>\n
varchartInstance = this.chart,<\/div>\n
ctx = chartInstance.ctx;<\/div>\n
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);<\/div>\n
ctx.textAlign = ‘center’;<\/div>\n
ctx.textBaseline = ‘bottom’;<\/div>\n
ctx.fillStyle = ‘#000’;<\/div>\n
this.data.datasets.forEach(function(dataset, i) {<\/div>\n
varisHidden = dataset._meta[0].hidden; \/\/’hidden’ property of dataset<\/div>\n
<\/div>\n
if (!isHidden) { \/\/if dataset is not hidden<\/div>\n
<\/div>\n
varmeta = chartInstance.controller.getDatasetMeta(i);<\/div>\n
\/\/console.log(‘meta’, meta)<\/div>\n
meta.data.forEach(function(bar, index) {<\/div>\n
vardata = dataset.data[index];<\/div>\n
diff = arr[index] – bar._model.y<\/div>\n
arr[index] = bar._model.y<\/div>\n
gap = diff \/ 2<\/div>\n
model_y = bar._model.y + gap<\/div>\n
<\/div>\n
console.log(‘i, index, model.y’, i, index, bar._model.y, arr[index])<\/div>\n
ctx.fillText(data, bar._model.x, model_y);<\/div>\n
}<\/div>\n
);<\/div>\n
}<\/div>\n
<\/div>\n
});<\/div>\n
<\/div>\n
}<\/div>\n
},<\/div>\n
tooltips: {<\/div>\n
mode:’label’,<\/div>\n
callbacks: {<\/div>\n
label:function(tooltipItem, data) {<\/div>\n
returndata.datasets[tooltipItem.datasetIndex].label + “: ” + numberWithCommas(tooltipItem.yLabel);<\/div>\n
}<\/div>\n
}<\/div>\n
},<\/div>\n
scales: {<\/div>\n
xAxes: [{<\/div>\n
stacked:true,<\/div>\n
gridLines: { display:false },<\/div>\n
}],<\/div>\n
yAxes: [{<\/div>\n
stacked:true,<\/div>\n
ticks: {<\/div>\n
callback:function(value) { returnnumberWithCommas(value);<\/div>\n
},<\/div>\n
},<\/div>\n
}],<\/div>\n
}, \/\/ scales<\/div>\n
legend: {display:true}<\/div>\n
} \/\/ options<\/div>\n
},<\/div>\n
<\/div>\n
);<\/div>\n
<\/script><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

<!DOCTYPE html> <html lang=”en”> <head> <metacharset=”UTF-8″> <metahttp-equiv=”X-UA-Compatible”content=”IE=edge”> <metaname=”viewport”content=”width=device-width, initial-scale=1.0″> <title>Document<\/title> <scriptsrc=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.5.0\/Chart.min.js”><\/script> <\/head> <body> <canvasid=”bar-chart”width=”600″height=”350″><\/canvas> <\/body> <\/html> <script> varnumberWithCommas = function(x) { returnx.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, “,”); }; var dataPack1 = [50000, 0, 0,0, 0, 0, 0, 0, 0, 0, 60100, 62000]; var dataPack2 = [0, 6000, 13000, 14000, 50060, 20030, 20070, 35000, 41000, 4020, 40030, 70050]; var dates […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-828","post","type-post","status-publish","format-standard","hentry","category-javascript-jquery"],"_links":{"self":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":1,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":829,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/828\/revisions\/829"}],"wp:attachment":[{"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.onepage.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}