热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

与chart.js的垂直的被堆积的长条图

如何解决《与chart.js的垂直的被堆积的长条图》经验,为你挑选了1个好方法。

来自chart.js的优秀免费图书馆.我正在将我的图表从Google图表转移到chart.js,因为我可以离线使用它们,它似乎对窗口的大小变化更敏感.此外,我意识到我在中国的观众无法看到我的谷歌图表,因为谷歌服务在中国被封锁.

我一直在阅读有关堆叠垂直条形图的文档,但我无法弄清楚,如何制作这样的图表.在我看到的堆叠条形图的所有示例中,每个条的项数相同.

我只能制作两个垂直堆叠的数据集吗?这是因为右边的条比左边的条有更多.或者我需要具有更多项目的条形图的n数据集,n即项目数量?

在此输入图像描述

我想为每个(堆叠)条组合一个数据集,但我不能.

var ctx = document.getElementById("barChart").getContext('2d');
    
var labels = ["standing costs", "running costs"];
var dataset = [ 
                {
                  type: 'bar',
                  label: ["cost1", "cost2", "cost3", "cost4"],
                  data: [1, 2, 1, 3],                       
                  stack: "standing costs",
                  backgroundColor: [
                      'navy',
                      'blue',
                      'aqua',
                      'teal'
                  ]
                },
                {
                  type: 'bar',
                  label: ["cost5", "cost6", "cost7", "cost8"],
                  data: [5, 1, 3, 0],                       
                  stack: "running costs",
                  backgroundColor: [                         
                      'green',
                      'lime',
                      'yellow',
                      'white'
                  ]
                }
            ];

var optiOns= {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
};

var cOntent= {
    type: 'bar',
    data: {
        labels: labels,
        datasets: dataset
    },
    options
};

new Chart(ctx, content);
@import url("https://cdnjs.cloudflare.com/ajax/libs/colors/1.0/colors.min.css");



1> ɢʀᴜɴᴛ..:

快速解决方案

垂直堆积条形图

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Washing and cleaning',
         data: [0, 8],
         backgroundColor: '#22aa99'
      }, {
         label: 'Traffic tickets',
         data: [0, 2],
         backgroundColor: '#994499'
      }, {
         label: 'Tolls',
         data: [0, 1],
         backgroundColor: '#316395'
      }, {
         label: 'Parking',
         data: [5, 2],
         backgroundColor: '#b82e2e'
      }, {
         label: 'Car tax',
         data: [0, 1],
         backgroundColor: '#66aa00'
      }, {
         label: 'Repairs and improvements',
         data: [0, 2],
         backgroundColor: '#dd4477'
      }, {
         label: 'Maintenance',
         data: [6, 1],
         backgroundColor: '#0099c6'
      }, {
         label: 'Inspection',
         data: [0, 2],
         backgroundColor: '#990099'
      }, {
         label: 'Loan interest',
         data: [0, 3],
         backgroundColor: '#109618'
      }, {
         label: 'Depreciation of the vehicle',
         data: [0, 2],
         backgroundColor: '#109618'
      }, {
         label: 'Fuel',
         data: [0, 1],
         backgroundColor: '#dc3912'
      }, {
         label: 'Insurance and Breakdown cover',
         data: [4, 0],
         backgroundColor: '#3366cc'
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});


推荐阅读
author-avatar
无奈中有几多Rudy
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有