个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用 ChartJS 创建一个包含实际金额与预算金额的堆积预算。
所以我的目标是创造这样的东西。
我已经做到了这一点。
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["Petrol", "Food", "Kids Clubs", "Alcohol"],
"datasets": [{
"label": "Actual Spend",
"data": [70, 100, 20, 29],
"borderColor": "rgb(63, 191, 63)",
"backgroundColor": "rgba(63, 191, 63)"
}, {
"label": "Budgeted amount",
"data": [60, 150, 20, 30],
"type": "bar",
"fill": false,
"borderColor": "rgb(63, 65, 191)",
"backgroundColor": "rgba(63, 65, 191)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<body>
<canvas id="chartjs-7" class="chartjs" width="770" height="385" style="display: block; width: 770px; height: 385px;"></canvas>
</body>但是我的目前看起来像这样。
有什么想法可以做到这一点，或者是否可以使用 graphJS 来实现，我似乎找不到一种方法将它们相互堆叠
最佳答案
您必须将 stacked: true 添加到 xAxes:
"options": {
"scales": {
"xAxes": [{
"stacked": true,
}],
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
演示:
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["Petrol", "Food", "Kids Clubs", "Alcohol"],
"datasets": [{
"label": "Actual Spend",
"data": [70, 100, 20, 29],
"borderColor": "rgb(63, 191, 63)",
"backgroundColor": "rgba(63, 191, 63)"
}, {
"label": "Budgeted amount",
"data": [60, 150, 20, 30],
"type": "bar",
"fill": false,
"borderColor": "rgb(63, 65, 191)",
"backgroundColor": "rgba(63, 65, 191)"
}]
},
"options": {
"scales": {
"xAxes": [{
"stacked": true,
}],
"yAxes": [{
//"stacked": true,
"ticks": {
"beginAtZero": true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<body>
<canvas id="chartjs-7" class="chartjs" width="770" height="385" style="display: block; width: 770px; height: 385px;"></canvas>
</body>关于javascript - 创建堆积预算与实际图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58506016/
24
4
0
我使用 Dojo fadeIn 和 fadeOut 以及一个计时器旋转了三个堆叠图像。只有最后一个的 href 可用。是否也可以旋转 href？ 这是它的 CSS: #main-slides
给定一个 numpy 数组，我想总结统一的元素 block 以形成一个新的、更小的数组。它与分箱类似，但不是按频率分箱。除了通过示例(如下)之外，我不确定如何描述它。 问题:是否有用于此的函数或更清晰
我正在尝试实现某种按钮控制的幻灯片放映，其中包括用于页面顶部全 Angular 图片的 div，用于页面顶部的 div页面底部的另一张全 Angular 图片和中央内容的最终 div(包括控制“幻
嘿，我正在使用 D3JS 作为图表库，我真的很想利用气泡图中的超酷功能。上主D3JS chart站点下面的Bubble Chart用来比较两组数据: Bubble Chart . 我想知道是否有人真的
我是一名优秀的程序员,十分优秀！