社区
HTML5
帖子详情
chart.js变态堆叠柱状图
李苗苗00000
2017-06-28 10:47:44
如何用chart.js实现两组堆叠柱状图,可以实现吗
...全文
1827
6
打赏
收藏
chart.js变态堆叠柱状图
如何用chart.js实现两组堆叠柱状图,可以实现吗
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
宝丶哥
2018-07-13
打赏
举报
回复
这是我项目的一个画图,你可以把从这:
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
开始,到这:
myChart.setOption(options);
结束的代码拿到出来放到html页面做测试,可能要微调一下,因为:
legend: {
data: 这里的值是动态获取的。 没图的话检查下这里写错没有。
}
和:
series: [
这里也是动态获取的。 没图的话检查下这里写错没有。
]
宝丶哥
2018-07-13
打赏
举报
回复
var ajax = new $ax(Feng.ctxPath + "/smartDevice/DeviceCountChart/" + Year, function (data) {
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
var options = {
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ["冰箱","小米笔记本","微波炉","无人机","油烟机","海尔冰箱","热水器","电磁炉","电脑","电视","空调","衣柜"]
},
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '数量',
min: 0, //y轴最小值
max: 15, //y轴最大值
interval: 3, //每X个值为一个阶段
axisLabel: {
formatter: '{value}件'
}
}
],
series: [
{
"type":"bar",
"data":[0,0,0,0,0,1,0,0,0,0,0,0],
"name":"冰箱"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"小米笔记本"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"微波炉"
},
{
"type":"bar",
"data":[0,0,0,0,0,1,0,0,0,0,0,0],
"name":"无人机"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"油烟机"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,0,0,0,0,0,0],
"name":"海尔冰箱"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"热水器"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"电磁炉"
},
{
"type":"bar",
"data":[0,0,0,0,0,1,1,0,0,0,0,0],
"name":"电脑"
},
{
"type":"bar",
"data":[0,0,0,0,0,3,2,0,0,0,0,0],
"name":"电视"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,2,0,0,0,0,0],
"name":"空调"
},
{
"type":"bar",
"data":[0,0,0,0,0,1,0,0,0,0,0,0],
"name":"衣柜"
}
]
};
myChart.setOption(options);
}, function (data) {
Feng.error("图表加载失败!");
});
ajax.start();
}
业余草
2017-06-29
打赏
举报
回复
可以实现的,官方文档多看看!
西萌萌
2017-06-28
打赏
举报
回复
可以用不同的stack名称: var barChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: 'Dataset 1', backgroundColor: window.chartColors.red, stack: 'Stack 0', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }, { label: 'Dataset 2', backgroundColor: window.chartColors.blue, stack: 'Stack 0', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }, { label: 'Dataset 3', backgroundColor: window.chartColors.green, stack: 'Stack 1', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }, { label: 'Dataset 4', backgroundColor: window.chartColors.green, stack: 'Stack 1', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }] }; 楼主是要这个效果吗?
yaomieyu5613
2017-06-28
打赏
举报
回复
为什么我的chart.js显示的柱形图在浏览器上是铺满整个浏览器页面的,你知道怎么调小点吗 <canvas id="canvas" width="300" height="150"></canvas>还是很大啊
李苗苗00000
2017-06-28
打赏
举报
回复
scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } 加上这个才有堆叠的效果哦
堆叠
柱状图
demo
对于
堆叠
柱状图
,我们需要设置`chart.type`为`'column'`,并启用`plotOptions.column.stacking`属性,值可以是`'normal'`(普通
堆叠
)或`'percent'`(百分比
堆叠
)。 3. **数据系列**: 配置对象中的`series`数组包含...
Chart js Demo
Chart.js
是一个轻量级的JavaScript库,专为创建简单、直观且响应式的图表而设计。在版本1.0.1.4中,开发者进一步增强了其功能,引入了鼠标点击事件,并将原本的曲线图模式改为了折线图模式。这一变化使得
Chart.js
更...
C#chart控件画3D柱状、折线图
在C#编程环境中,Microsoft Chart Control是一个强大的工具,它允许开发者创建各种图表,包括2D和3D的
柱状图
以及折线图。这个控件适用于数据可视化,尤其是在数据分析、报表制作或者用户界面设计中。本教程将详细...
js饼状图+
柱状图
+曲线图
JavaScript中实现饼状图的库有很多,例如D3.js、
Chart.js
、ECharts等。以ECharts为例,创建饼状图的基本步骤包括: 1. 引入ECharts库:在HTML文件中通过`<script>`标签引入ECharts的JS文件。 2. 准备容器:创建一个...
Chart.js
堆叠
柱状图
添加flag
本文章是因为项目中之前遇到一个问题,需要在
堆叠
柱状图
加上一个月份的flag,但是flag不能覆盖到
柱状图
。所以当时自己写了demo去查看相关的内容。初始想法是参照官方文档扩展chart<!DOCTYPE html> &...
HTML5
43,708
社区成员
5,579
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章