如何解决如何在chart.js中将堆叠的条与未堆叠的线结合在一起?
我有以下图表,该图表结合了堆叠的条形和线形: (我使用的是chart.js版本2.9.3)
document.getElementById("H1_element_Id").innerHTML = "your date here";
var config_bar = {
data: {
labels: ['07/2017','08/2017','09/2017','10/2017','11/2017','12/2017','01/2018','02/2018','03/2018','04/2018','05/2018','06/2018','07/2018','08/2018','09/2018','10/2018','11/2018','12/2018','01/2019','02/2019','03/2019','04/2019','05/2019','06/2019','07/2019','08/2019','09/2019','10/2019','11/2019','12/2019','01/2020','02/2020','03/2020','04/2020','05/2020','06/2020'],datasets: [
{
label: 'PL por Cota',stack: 1,type: 'line',lineTension: 0,fill: false,borderWidth: 1,pointRadius: 1,pointBackgroundColor: 'darkslategray',fill: true,borderColor: 'darkslategray',backgroundColor: '#0000',data: [148.24685879373163,147.83239343636143,148.4740261082743,148.69581034253903,148.15328057997317,149.33569742655524,149.69179842884427,149.89858782218852,150.0904642602701,149.44460371253268,148.62809746041634,147.8934673158971,147.85579089136,147.68399166203898,147.52773117796048,148.0170264143788,148.09258078584878,151.84947800517398,151.82528495482927,151.5430036339749,151.82090296487925,151.8449879860763,151.8404090652978,151.38593311346182,152.11941641180533,152.2699923758313,152.4078966016985,148.6308296112128,148.79815987941726,163.82791542782243,163.78409303653544,163.27664958374186,163.01562967477085,163.05044452353235,163.27113494795353,163.48821347369875],},{
label: 'Cotação',stack: 2,pointBackgroundColor: 'red',borderColor: 'red',data: [142.50,147.20,158.00,158.70,151.40,144.00,150.00,152.50,151.59,137.50,120.80,121.75,124.50,126.58,134.75,149.35,145.12,152.00,156.98,157.40,160.50,165.70,150.50,159.50,173.50,168.00,198.00,198.02,176.84,153.00,146.10,144.49,150.40],{
label: 'Ativo Operacional',stack: 3,barThickness: 'flex',type: 'bar',pointRadius: 0,borderWidth: 0,borderColor: '#FFF',backgroundColor: '#939bf5FF',data: [135.96430463084613,137.54460909780443,140.67908737657623,142.05427407457572,141.29194991941054,139.1964392247159,139.0868111606236,139.40161581178637,139.55777710175943,138.97720705394752,138.76979447792934,136.2650488859693,135.89536662648482,150.75328785063184,150.6864794029608,151.11293885630695,151.12660655280303,154.67734532377997,153.6366564451247,153.3736195500535,153.53586466118568,153.58139898822986,153.07832690739664,151.4795774566239,151.45219540843277,151.5397385623925,151.71946235185763,133.4891078591967,133.24314498461501,185.84348420819853,185.87738328905758,185.82914043547817,185.38570819283953,185.5144805862584,185.52979832246302,185.9547707844898],{
label: 'disponibilidades',backgroundColor: '#08ebb8FF',data: [11.28771628584199,9.45323689913451,7.215706846717503,6.3066646110712306,6.49949666535737,10.346252335739731,10.757716646124257,10.614095115872738,10.871248101745879,10.723245642074469,10.183475114789182,12.02734738795357,12.377363313513294,1.0030677696360608,0.8349967100540423,0.9727307255759775,1.01778900868199,1.2675529181509122,1.8914461256111932,2.1603038804838075,2.366197568771925,2.365839100107001,2.8280270536766396,3.9226156776963603,1.2314401606371308,1.1812156844685835,21.554776473297125,29.558121032418956,29.182880698872317,3.440149297628846,5.966187705676969,5.457241702190709,2.716079169557316,2.56256587096696,2.690589287377426,2.2140686066365456],{
label: 'Valores a Receber',backgroundColor: '#c2fbf2FF',data: [2.5758694315395974,2.4676077731576167,2.424237520824586,2.3268507984450975,2.251443476317536,1.6797409313161138,1.63237898985521,1.5943311874415895,1.4701509338895584,1.409214286681746,1.1732220259782475,1.052632908940689,1.0370167138464872,0.9434617884086631,0.8613445314298871,0.917244702089908,0.9506604867873929,0.9368527894786742,1.3361394156925952,0.9798860627649633,0.9678528626186832,0.9669726293833214,1.0204355514621228,1.0777832969890697,0.9517760926981892,1.0793724560144113,0.9661316181549755,0.6369811862771928,1.486365966988468,5.638144464367484,2.70460469003375,2.6887706028424843,2.7560762496969846,2.7205690490550407,2.804257033353462,3.0982032259785997],{
label: 'Rendimentos a Distribuir',backgroundColor: '#ff6347FF',data: [-0.94,-0.9400127317793339,-0.9400318294483347,-0.9400509271173355,-0.8000827565656703,-0.8000990099009901,-0.80010984545787,-0.8001206810147499,-0.8002622204764936,-0.8004782543917867,-0.8004890899486665,-0.8004999255055465,-0.6205107610624263,-0.7401832563557313,-0.7401814955777384,-0.7401915184678522,-0.74,-0.7400992266121277,-0.7933970473107502,-0.6583289741985899,-1.08,-0.7400074915643597,-0.65,-0.57,-0.57],{
label: 'Taxas',backgroundColor: '#ffaf18FF',data: [-0.12397633920710813,-0.13552488791970854,-0.11802531592420527,-0.1241207081036421,-0.11816818409611139,-0.11610525524508675,-0.12906920670179192,-0.10392992103587924,-0.1243650797090653,-0.12684444474543213,-0.12015833322046295,-0.1047257940431526,-0.10602738145223552,-0.11276071433408731,-0.09555118987958987,-0.11400555593179018,-0.10964285733634924,-0.11504285733634924,-0.12847539651365958,-0.11650714334087307,-0.11312341022063901,-0.12889722203410492,-0.13407777762728393,-0.11861428532730155,-0.14870198832468745,-0.14036785767496038,-0.1311349202909347,-0.1498847233221925,-0.13206785674020208,-0.150394047961365,-0.17789364771760244,-0.13480952420149866,-0.13521388924933694,-0.11325793798298046,-0.1119486899982344,-0.12422380872796845],{
label: 'Outras Obrigações',backgroundColor: '#ffea00FF',data: [-0.5170552152889707,-0.5575227140361095,-0.7869484904714822,-0.9278266040010293,-0.8314094675678239,-0.8305788828540857,-0.8559564044913384,-0.8074253619753221,-0.8842369519578497,-0.7380981444108843,-0.5779736045834406,-0.5463578185315112,-0.5474392910836912,-4.102565106797957,-4.139027515542252,-4.131699057306551,-4.152650909509555,-4.17703865043139,-4.170481635085533,-4.11429871598651,-4.195789490864271,-4.200325509609784,-4.2123026696103265,-4.235429032520215,-0.6272932616380653,-0.6499664693692352,-20.907941874009563,-14.245166769159283,-14.24216391431833,-29.863468494411062,-29.84618150895089,-29.823693632567995,-27.057020048073646,-27.063913044765055,-27.071561005242152,-27.084605334678237],}
]
},options: {
responsive: true,maintainAspectRatio: false,title: {
display: false,text: 'HGRE11 - Evolução Patrimonial'
},tooltips: {
mode: 'index',intersect: false,callbacks: {
label: function(tooltipItem,data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
value = tooltipItem.yLabel;
if (Math.abs(value) < 1) {
label += String(value.toLocaleString('pt-br',{
style: 'currency',currency: 'BRL'
})) + '';
} else {
label += String(value.toLocaleString('pt-br',currency: 'BRL'
}));
}
return label;
}
}
},hover: {
mode: 'nearest',intersect: true
},scales: {
xAxes: [{
display: true,offset: true,stacked: true,gridLines: {
borderDash: [6,3],//estilo da linha no grid
color: '#AAAAAA22'
}
}],yAxes: [{
display: true,ticks: {
callback: function(value,index,values) {
value = value;
value = String(value.toLocaleString('pt-br',currency: 'BRL'
}));
return value;
}
}
}]
}
}
};
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 20;
};
window.onload = function() {
//imprime o grafico de linhas
//var chart_lines = document.getElementById('canvas_lines').getContext('2d');
//window.myLine = new Chart(chart_lines,config_lines);
var chart_bar = document.getElementById('canvas_bar').getContext('2d');
window.myLine = new Chart(chart_bar,config_bar);
};
我已尝试将线堆叠起来,同时保持条形堆叠,但是我尝试的任何方法均无效。 在数据集集合中,我用不同的堆栈名称标记了每一行,但没有成功。 我如何拆开图表中的线?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。