Chart.js的垂直堆积条形图

若昂·皮门特尔·费雷拉

来自chart.js的优秀且免费的库。我正在将图表从Google图表转移到chart.js，因为我可以脱机使用它们，并且它似乎对窗口大小的更改更敏感。此外，我意识到我的中国观众看不到我的Google排行榜，因为在中国禁止了Google服务。

我一直在阅读有关堆叠式垂直条形图的文档，但是我不知道如何制作这样的图表。在所有看到的堆叠条形图中的所有示例中，每个条的项目数均相同。

我只能制作两个垂直堆叠的数据集吗？这是因为右边的栏比左边的栏有更多的项目。还是我需要包含更多项目的栏的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");

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="barChart"></canvas>

ɢʀᴜɴᴛ

快速解决方案：

垂直堆积条形图

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..
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>

_{道歉，没有给出解释。}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-7

我来说两句

0 条评论

登录后参与评论

上一篇：Python，比较并计算列表中的数据

Chart.js的垂直堆积条形图

Chart.js的垂直堆积条形图

码

垂直堆积条形图

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

SQL Server中的非确定性数据类型

Swift 2.1-对单个单元格使用UITableView

如何避免每次重新编译所有文件？

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

应用发明者仅从列表中选择一个随机项一次

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

HttpClient中的角度变化检测

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何了解DFT结果

Camunda-根据分配的组过滤任务列表

错误：找不到存根。请确保已调用spring-cloud-contract：convert

为什么此后台线程中未处理的异常不会终止我的进程？

构建类似于Jarvis的本地语言应用程序

使用分隔符将成对相邻的数组元素相互连接

您如何通过 Nativescript 中的 Fetch 发出发布请求？

通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

使用 text() 獲取特定文本節點的 XPath