如何在chart.js中将堆叠的条与未堆叠的线结合在一起?

如何解决如何在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 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-