问题：
具有两个Y轴问题的水平堆叠条形图
卢翔宇
关于我的图表，我有以下问题/疑问：
>
如何防止正确的 y 轴刻度值被部分删除或进入图表内部？
当我使用yValuesTripId作为左和右y轴域的域时，图表绘制得很好。如何使用yAxisFirstStopTimes作为左y轴域值和yAxisLastStopTimes作为右y轴值使其绘制精细？
您可以单击此处查看或编辑图表：
代码如下：
// source : https://gist.github.com/sidnan/20cf8ccf17f46534b101
d3.select("#chartDiv").select("svg").remove();
d3.select("#chartDiv").select("#legend").remove();
var dataset = [{
"stopId": "29",
"data": [{
"yValue": "10100001",
"xValue": 5,
"time": "05:45:00",
"stopId": "29",
"passengers": 22
}, {
"yValue": "10100002",
"xValue": 5,
"time": "06:00:00",
"stopId": "29",
"passengers": 7
}, {
"yValue": "10100003",
"xValue": 5,
"time": "06:15:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "10100004",
"xValue": 5,
"time": "06:30:00",
"stopId": "29",
"passengers": 4
}, {
"yValue": "10100005",
"xValue": 5,
"time": "06:45:00",
"stopId": "29",
"passengers": 1
}, {
"yValue": "10100006",
"xValue": 5,
"time": "07:00:00",
"stopId": "29",
"passengers": 30
}, {
"yValue": "10100007",
"xValue": 5,
"time": "07:15:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "10100008",
"xValue": 5,
"time": "07:30:00",
"stopId": "29",
"passengers": 28
}, {
"yValue": "10100009",
"xValue": 5,
"time": "07:45:00",
"stopId": "29",
"passengers": 30
}, {
"yValue": "10101001",
"xValue": 5,
"time": "06:07:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "10101002",
"xValue": 5,
"time": "06:51:00",
"stopId": "29",
"passengers": 15
}, {
"yValue": "10101003",
"xValue": 5,
"time": "07:35:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "10101004",
"xValue": 5,
"time": "08:19:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "10110011",
"xValue": 5,
"time": "06:15:00",
"stopId": "185",
"passengers": 29
}, {
"yValue": "10110012",
"xValue": 5,
"time": "06:30:00",
"stopId": "185",
"passengers": 14
}, {
"yValue": "10110013",
"xValue": 5,
"time": "06:45:00",
"stopId": "185",
"passengers": 23
}, {
"yValue": "10110014",
"xValue": 5,
"time": "07:01:00",
"stopId": "185",
"passengers": 20
}, {
"yValue": "10110015",
"xValue": 5,
"time": "07:15:00",
"stopId": "185",
"passengers": 30
}, {
"yValue": "10110016",
"xValue": 5,
"time": "07:30:00",
"stopId": "185",
"passengers": 27
}, {
"yValue": "10110017",
"xValue": 5,
"time": "07:45:00",
"stopId": "185",
"passengers": 27
}, {
"yValue": "10110018",
"xValue": 5,
"time": "08:00:00",
"stopId": "185",
"passengers": 16
}, {
"yValue": "10110019",
"xValue": 5,
"time": "08:15:00",
"stopId": "185",
"passengers": 7
}, {
"yValue": "10111011",
"xValue": 5,
"time": "06:31:00",
"stopId": "52",
"passengers": 13
}, {
"yValue": "10111012",
"xValue": 5,
"time": "07:15:00",
"stopId": "52",
"passengers": 20
}, {
"yValue": "10111013",
"xValue": 5,
"time": "07:59:00",
"stopId": "52",
"passengers": 21
}, {
"yValue": "10111014",
"xValue": 5,
"time": "08:44:00",
"stopId": "52",
"passengers": 13
}, {
"yValue": "101000010",
"xValue": 5,
"time": "08:00:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "101000011",
"xValue": 5,
"time": "08:15:00",
"stopId": "29",
"passengers": 24
}, {
"yValue": "101000012",
"xValue": 5,
"time": "08:30:00",
"stopId": "29",
"passengers": 30
}, {
"yValue": "101000013",
"xValue": 5,
"time": "08:43:00",
"stopId": "29",
"passengers": 13
}, {
"yValue": "101000014",
"xValue": 5,
"time": "09:00:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "101000015",
"xValue": 5,
"time": "09:30:00",
"stopId": "29",
"passengers": 13
}, {
"yValue": "101000016",
"xValue": 5,
"time": "10:00:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "101000017",
"xValue": 5,
"time": "10:30:00",
"stopId": "29",
"passengers": 14
}, {
"yValue": "101000018",
"xValue": 5,
"time": "11:00:00",
"stopId": "29",
"passengers": 21
}, {
"yValue": "101000019",
"xValue": 5,
"time": "11:30:00",
"stopId": "29",
"passengers": 23
}, {
"yValue": "101000020",
"xValue": 5,
"time": "12:00:00",
"stopId": "29",
"passengers": 18
}, {
"yValue": "101000021",
"xValue": 5,
"time": "12:28:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "101000022",
"xValue": 5,
"time": "13:00:00",
"stopId": "29",
"passengers": 24
}, {
"yValue": "101000023",
"xValue": 5,
"time": "13:30:00",
"stopId": "29",
"passengers": 17
}, {
"yValue": "101000024",
"xValue": 5,
"time": "14:00:00",
"stopId": "29",
"passengers": 11
}, {
"yValue": "101000025",
"xValue": 5,
"time": "14:30:00",
"stopId": "29",
"passengers": 20
}, {
"yValue": "101000026",
"xValue": 5,
"time": "14:59:00",
"stopId": "29",
"passengers": 29
}],
"name": "Passengers"
}, {
"stopId": "48",
"data": [{
"yValue": "10100001",
"xValue": 5,
"time": "05:50:00",
"stopId": "48",
"passengers": 16
}, {
"yValue": "10100002",
"xValue": 5,
"time": "06:03:00",
"stopId": "48",
"passengers": 25
}, {
"yValue": "10100003",
"xValue": 5,
"time": "06:18:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "10100004",
"xValue": 5,
"time": "06:33:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "10100005",
"xValue": 5,
"time": "06:48:00",
"stopId": "48",
"passengers": 16
}, {
"yValue": "10100006",
"xValue": 5,
"time": "07:03:00",
"stopId": "48",
"passengers": 22
}, {
"yValue": "10100007",
"xValue": 5,
"time": "07:18:00",
"stopId": "48",
"passengers": 10
}, {
"yValue": "10100008",
"xValue": 5,
"time": "07:33:00",
"stopId": "48",
"passengers": 6
}, {
"yValue": "10100009",
"xValue": 5,
"time": "07:48:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "10101001",
"xValue": 5,
"time": "06:10:00",
"stopId": "48",
"passengers": 27
}, {
"yValue": "10101002",
"xValue": 5,
"time": "06:54:00",
"stopId": "48",
"passengers": 14
}, {
"yValue": "10101003",
"xValue": 5,
"time": "07:38:00",
"stopId": "48",
"passengers": 17
}, {
"yValue": "10101004",
"xValue": 5,
"time": "08:22:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "10110011",
"xValue": 5,
"time": "06:16:00",
"stopId": "149",
"passengers": 2
}, {
"yValue": "10110012",
"xValue": 5,
"time": "06:31:00",
"stopId": "149",
"passengers": 20
}, {
"yValue": "10110013",
"xValue": 5,
"time": "06:46:00",
"stopId": "149",
"passengers": 20
}, {
"yValue": "10110014",
"xValue": 5,
"time": "07:02:00",
"stopId": "149",
"passengers": 21
}, {
"yValue": "10110015",
"xValue": 5,
"time": "07:16:00",
"stopId": "149",
"passengers": 16
}, {
"yValue": "10110016",
"xValue": 5,
"time": "07:31:00",
"stopId": "149",
"passengers": 23
}, {
"yValue": "10110017",
"xValue": 5,
"time": "07:46:00",
"stopId": "149",
"passengers": 21
}, {
"yValue": "10110018",
"xValue": 5,
"time": "08:01:00",
"stopId": "149",
"passengers": 29
}, {
"yValue": "10110019",
"xValue": 5,
"time": "08:16:00",
"stopId": "149",
"passengers": 26
}, {
"yValue": "10111011",
"xValue": 5,
"time": "06:32:00",
"stopId": "5",
"passengers": 10
}, {
"yValue": "10111012",
"xValue": 5,
"time": "07:16:00",
"stopId": "5",
"passengers": 16
}, {
"yValue": "10111013",
"xValue": 5,
"time": "08:00:00",
"stopId": "5",
"passengers": 23
}, {
"yValue": "10111014",
"xValue": 5,
"time": "08:45:00",
"stopId": "5",
"passengers": 15
}, {
"yValue": "101000010",
"xValue": 5,
"time": "08:03:00",
"stopId": "48",
"passengers": 28
}, {
"yValue": "101000011",
"xValue": 5,
"time": "08:18:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "101000012",
"xValue": 5,
"time": "08:33:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "101000013",
"xValue": 5,
"time": "08:46:00",
"stopId": "48",
"passengers": 27
}, {
"yValue": "101000014",
"xValue": 5,
"time": "09:03:00",
"stopId": "48",
"passengers": 13
}, {
"yValue": "101000015",
"xValue": 5,
"time": "09:33:00",
"stopId": "48",
"passengers": 21
}, {
"yValue": "101000016",
"xValue": 5,
"time": "10:03:00",
"stopId": "48",
"passengers": 18
}, {
"yValue": "101000017",
"xValue": 5,
"time": "10:33:00",
"stopId": "48",
"passengers": 18
}, {
"yValue": "101000018",
"xValue": 5,
"time": "11:03:00",
"stopId": "48",
"passengers": 28
}, {
"yValue": "101000019",
"xValue": 5,
"time": "11:33:00",
"stopId": "48",
"passengers": 29
}, {
"yValue": "101000020",
"xValue": 5,
"time": "12:03:00",
"stopId": "48",
"passengers": 21
}, {
"yValue": "101000021",
"xValue": 5,
"time": "12:31:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "101000022",
"xValue": 5,
"time": "13:03:00",
"stopId": "48",
"passengers": 19
}, {
"yValue": "101000023",
"xValue": 5,
"time": "13:33:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "101000024",
"xValue": 5,
"time": "14:03:00",
"stopId": "48",
"passengers": 4
}, {
"yValue": "101000025",
"xValue": 5,
"time": "14:33:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "101000026",
"xValue": 5,
"time": "15:02:00",
"stopId": "48",
"passengers": 21
}],
"name": "Passengers"
}, {
"stopId": "30",
"data": [{
"yValue": "10100001",
"xValue": 5,
"time": "05:52:00",
"stopId": "30",
"passengers": 12
}, {
"yValue": "10100002",
"xValue": 5,
"time": "06:06:00",
"stopId": "30",
"passengers": 18
}, {
"yValue": "10100003",
"xValue": 5,
"time": "06:21:00",
"stopId": "30",
"passengers": 1
}, {
"yValue": "10100004",
"xValue": 5,
"time": "06:36:00",
"stopId": "30",
"passengers": 7
}, {
"yValue": "10100005",
"xValue": 5,
"time": "06:51:00",
"stopId": "30",
"passengers": 21
}, {
"yValue": "10100006",
"xValue": 5,
"time": "07:06:00",
"stopId": "30",
"passengers": 27
}, {
"yValue": "10100007",
"xValue": 5,
"time": "07:21:00",
"stopId": "30",
"passengers": 11
}, {
"yValue": "10100008",
"xValue": 5,
"time": "07:36:00",
"stopId": "30",
"passengers": 18
}, {
"yValue": "10100009",
"xValue": 5,
"time": "07:51:00",
"stopId": "30",
"passengers": 26
}, {
"yValue": "10101001",
"xValue": 5,
"time": "06:13:00",
"stopId": "30",
"passengers": 29
}, {
"yValue": "10101002",
"xValue": 5,
"time": "06:57:00",
"stopId": "30",
"passengers": 24
}, {
"yValue": "10101003",
"xValue": 5,
"time": "07:41:00",
"stopId": "30",
"passengers": 30
}, {
"yValue": "10101004",
"xValue": 5,
"time": "08:25:00",
"stopId": "30",
"passengers": 4
}, {
"yValue": "10110011",
"xValue": 5,
"time": "06:17:00",
"stopId": "51",
"passengers": 5
}, {
"yValue": "10110012",
"xValue": 5,
"time": "06:32:00",
"stopId": "51",
"passengers": 15
}, {
"yValue": "10110013",
"xValue": 5,
"time": "06:47:00",
"stopId": "51",
"passengers": 13
}, {
"yValue": "10110014",
"xValue": 5,
"time": "07:03:00",
"stopId": "51",
"passengers": 28
}, {
"yValue": "10110015",
"xValue": 5,
"time": "07:17:00",
"stopId": "51",
"passengers": 6
}, {
"yValue": "10110016",
"xValue": 5,
"time": "07:32:00",
"stopId": "51",
"passengers": 25
}, {
"yValue": "10110017",
"xValue": 5,
"time": "07:47:00",
"stopId": "51",
"passengers": 20
}, {
"yValue": "10110018",
"xValue": 5,
"time": "08:02:00",
"stopId": "51",
"passengers": 11
}, {
"yValue": "10110019",
"xValue": 5,
"time": "08:17:00",
"stopId": "51",
"passengers": 15
}, {
"yValue": "10111011",
"xValue": 5,
"time": "06:34:00",
"stopId": "56",
"passengers": 25
}, {
"yValue": "10111012",
"xValue": 5,
"time": "07:18:00",
"stopId": "56",
"passengers": 30
}, {
"yValue": "10111013",
"xValue": 5,
"time": "08:02:00",
"stopId": "56",
"passengers": 22
}, {
"yValue": "10111014",
"xValue": 5,
"time": "08:47:00",
"stopId": "56",
"passengers": 25
}, {
"yValue": "101000010",
"xValue": 5,
"time": "08:06:00",
"stopId": "30",
"passengers": 15
}, {
"yValue": "101000011",
"xValue": 5,
"time": "08:21:00",
"stopId": "30",
"passengers": 24
}, {
"yValue": "101000012",
"xValue": 5,
"time": "08:36:00",
"stopId": "30",
"passengers": 30
}, {
"yValue": "101000013",
"xValue": 5,
"time": "08:49:00",
"stopId": "30",
"passengers": 23
}, {
"yValue": "101000014",
"xValue": 5,
"time": "09:06:00",
"stopId": "30",
"passengers": 26
}, {
"yValue": "101000015",
"xValue": 5,
"time": "09:36:00",
"stopId": "30",
"passengers": 26
}, {
"yValue": "101000016",
"xValue": 5,
"time": "10:06:00",
"stopId": "30",
"passengers": 8
}, {
"yValue": "101000017",
"xValue": 5,
"time": "10:36:00",
"stopId": "30",
"passengers": 24
}, {
"yValue": "101000018",
"xValue": 5,
"time": "11:06:00",
"stopId": "30",
"passengers": 7
}, {
"yValue": "101000019",
"xValue": 5,
"time": "11:36:00",
"stopId": "30",
"passengers": 20
}, {
"yValue": "101000020",
"xValue": 5,
"time": "12:06:00",
"stopId": "30",
"passengers": 12
}, {
"yValue": "101000021",
"xValue": 5,
"time": "12:34:00",
"stopId": "30",
"passengers": 25
}, {
"yValue": "101000022",
"xValue": 5,
"time": "13:06:00",
"stopId": "30",
"passengers": 18
}, {
"yValue": "101000023",
"xValue": 5,
"time": "13:36:00",
"stopId": "30",
"passengers": 22
}, {
"yValue": "101000024",
"xValue": 5,
"time": "14:06:00",
"stopId": "30",
"passengers": 27
}, {
"yValue": "101000025",
"xValue": 5,
"time": "14:36:00",
"stopId": "30",
"passengers": 29
}, {
"yValue": "101000026",
"xValue": 5,
"time": "15:05:00",
"stopId": "30",
"passengers": 23
}],
"name": "Passengers"
}];
var margins = {
top: 12,
left: 100,
right: 14,
bottom: 34
};
var legendPanel = {
width: 100
};
var numberOfRecords = 0;
var dataset = dataset.map(function(d) {
numberOfRecords = 0;
return d.data.map(function(o, i) {
numberOfRecords++;
return {
y: o.xValue,
x: o.yValue,
name: d.name,
stopId: o.stopId,
passengers: o.passengers,
time: o.time
};
});
});
d3.select(window).on("resize", throttle);
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(group) {
return group.map(function(d) {
// Invert the x and y values, and y0 becomes x0
return {
x: d.y,
y: d.x,
x0: d.y0,
name: d.name,
stopId: d.stopId,
passengers: d.passengers,
time: d.time
};
});
});
var yValuesTripId = dataset[0].map(function(d) {
return d.y;
});
var yValuesFirstStopTimes = dataset[0].map(function(d) {
return d.time.slice(0, -3);
});
var yValuesLastStopTimes = dataset[dataset.length - 1].map(function(d) {
return d.time.slice(0, -3);
});
var xMax = d3.max(dataset, function(group) {
return d3.max(group, function(d) {
return d.x + d.x0;
});
});
var tooltip = d3.select("#chartDiv")
.append('div')
.attr('id', 'tooltip')
.attr('class', 'hidden');
const chartArea = $("#chartDiv");
var width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
var barHeight = 10;
var height = (numberOfRecords * 40) - margins.top - margins.bottom;
var svg, xScale, yScaleLeft, yScaleRight, rects;
draw(width, height);
function draw(width, height) {
svg = d3.select("#chartDiv")
.append('svg')
.attr('width', width + margins.left + margins.right)
.attr('height', height + margins.top + margins.bottom)
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
xScale = d3.scale.linear()
.domain([0, xMax])
.range([0, width - margins.right]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
yScaleLeft = d3.scale.ordinal()
.domain(yValuesFirstStopTimes)
.rangeRoundBands([0, height], .1);
var yAxisLeft = d3.svg.axis()
.scale(yScaleLeft)
.orient('left');
yScaleRight = d3.scale.ordinal()
.domain(yValuesLastStopTimes)
.rangeRoundBands([0, height], .1);
var yAxisRight = d3.svg.axis()
.scale(yScaleRight)
.orient('right');
var groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g');
rects = groups.selectAll('rect')
.data(function(d) {
return d;
})
.enter()
.append('rect')
.attr('x', function(d) {
return xScale(d.x0);
})
.attr('y', function(d, i) {
return yScaleLeft(d.y);
})
.attr('height', function(d) {
return barHeight;
})
.attr('width', function(d) {
return xScale(d.x);
})
.attr('fill', function(d) {
return getColor(d.passengers);
})
.attr('stroke', 'white')
.on('mouseover', function(d) {
var xPos = d3.event.pageX - 310;
var yPos = d3.event.pageY - 110;
d3.select('#tooltip')
.style("left", xPos + "px")
.style("top", yPos + "px")
.style('width', '250px')
.text("Trip " + d.y + '|Passengers:' + d.passengers + '|Stop ' + d.stopId + '|time ' + d.time);
d3.select('#tooltip').classed('hidden', false);
})
.on('mouseout', function() {
d3.select('#tooltip').classed('hidden', true);
});
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.call(yAxisLeft);
/* svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + width + ",200)")
.call(yAxisRight); */
const newWidth = width - 20;
svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + newWidth + ",0)")
.call(yAxisRight);
var legend = d3.select("#chartDiv")
.append('div')
.attr('id', 'legend')
.attr('class', 'row legend-row');
legend.append('div')
.attr('class', 'col-sm-4');
const legendInfo = [{
"color": "grey",
"text": "Low occupancy less than 10 passengers"
}, {
"color": "yellow",
"text": "Medium occupancy 10 to 20 passengers"
}, {
"color": "orange",
"text": "High occupancy 20 to 25 passengers"
}, {
"color": "red",
"text": "Crowded more than 25 passengers"
}, ]
$.each(legendInfo, function(idx, info) {
let legendSection = legend.append('div')
.attr('class', 'col-sm-4');
legendSection.append('div')
.attr('class', 'legend-element')
.attr('style', 'background-color:' + info.color);
legendSection.append('div')
.attr('style', 'margin-left: 15px;')
.text(info.text)
});
}
function redraw() {
width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
d3.select('svg').remove();
d3.select('#legend').remove();
draw(width, height);
}
var throttleTimer;
function throttle() {
window.clearTimeout(throttleTimer);
throttleTimer = window.setTimeout(function() {
redraw();
}, 200);
}
function getColor(numberOfPassengers) {
cellColor = "";
if (numberOfPassengers < 10) {
cellColor = "grey";
} else if (numberOfPassengers < 20) {
cellColor = "yellow";
} else if (numberOfPassengers < 25) {
cellColor = "orange";
} else {
cellColor = "red";
}
return cellColor;
}
共有1个答案
姚韬
你的第一个问题很简单：只要改变右边距。
然而，第二个问题要复杂得多：尽管y值第一停止时间和y值最后停止时间都具有相同的长度（即43），但左轴似乎与右轴未对齐，因为您的y值第一停止时间和y值最后停止时间中都有重复值 阵 列。在 D3 中，序数刻度将合并这些值（并且由于两个数组中的重复值数不同，因此最终将在主轴和右轴上得到不同数量的刻度）。
（黑客）解决方案是根据yValuesFirstStopTimes的长度定义域。。。
yScaleLeft = d3.scale.ordinal()
.domain(d3.range(0, yValuesFirstStopTimes.length))
.rangeRoundBands([0, height], .1);
...然后，在轴生成器中，通过其索引获取每个刻度的值：
var yAxisLeft = d3.svg.axis()
.scale(yScaleLeft)
.orient('left')
.tickFormat(function(d, i) {
return yValuesFirstStopTimes[i];
});
对＜code＞yValuesLastTopTimes＜code＞执行相同的操作。
这是您更新的代码：
// source : https://gist.github.com/sidnan/20cf8ccf17f46534b101
d3.select("#chartDiv").select("svg").remove();
d3.select("#chartDiv").select("#legend").remove();
var dataset = [{
"stopId": "29",
"data": [{
"yValue": "10100001",
"xValue": 5,
"time": "05:45:00",
"stopId": "29",
"passengers": 22
}, {
"yValue": "10100002",
"xValue": 5,
"time": "06:00:00",
"stopId": "29",
"passengers": 7
}, {
"yValue": "10100003",
"xValue": 5,
"time": "06:15:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "10100004",
"xValue": 5,
"time": "06:30:00",
"stopId": "29",
"passengers": 4
}, {
"yValue": "10100005",
"xValue": 5,
"time": "06:45:00",
"stopId": "29",
"passengers": 1
}, {
"yValue": "10100006",
"xValue": 5,
"time": "07:00:00",
"stopId": "29",
"passengers": 30
}, {
"yValue": "10100007",
"xValue": 5,
"time": "07:15:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "10100008",
"xValue": 5,
"time": "07:30:00",
"stopId": "29",
"passengers": 28
}, {
"yValue": "10100009",
"xValue": 5,
"time": "07:45:00",
"stopId": "29",
"passengers": 30
}, {
"yValue": "10101001",
"xValue": 5,
"time": "06:07:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "10101002",
"xValue": 5,
"time": "06:51:00",
"stopId": "29",
"passengers": 15
}, {
"yValue": "10101003",
"xValue": 5,
"time": "07:35:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "10101004",
"xValue": 5,
"time": "08:19:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "10110011",
"xValue": 5,
"time": "06:15:00",
"stopId": "185",
"passengers": 29
}, {
"yValue": "10110012",
"xValue": 5,
"time": "06:30:00",
"stopId": "185",
"passengers": 14
}, {
"yValue": "10110013",
"xValue": 5,
"time": "06:45:00",
"stopId": "185",
"passengers": 23
}, {
"yValue": "10110014",
"xValue": 5,
"time": "07:01:00",
"stopId": "185",
"passengers": 20
}, {
"yValue": "10110015",
"xValue": 5,
"time": "07:15:00",
"stopId": "185",
"passengers": 30
}, {
"yValue": "10110016",
"xValue": 5,
"time": "07:30:00",
"stopId": "185",
"passengers": 27
}, {
"yValue": "10110017",
"xValue": 5,
"time": "07:45:00",
"stopId": "185",
"passengers": 27
}, {
"yValue": "10110018",
"xValue": 5,
"time": "08:00:00",
"stopId": "185",
"passengers": 16
}, {
"yValue": "10110019",
"xValue": 5,
"time": "08:15:00",
"stopId": "185",
"passengers": 7
}, {
"yValue": "10111011",
"xValue": 5,
"time": "06:31:00",
"stopId": "52",
"passengers": 13
}, {
"yValue": "10111012",
"xValue": 5,
"time": "07:15:00",
"stopId": "52",
"passengers": 20
}, {
"yValue": "10111013",
"xValue": 5,
"time": "07:59:00",
"stopId": "52",
"passengers": 21
}, {
"yValue": "10111014",
"xValue": 5,
"time": "08:44:00",
"stopId": "52",
"passengers": 13
}, {
"yValue": "101000010",
"xValue": 5,
"time": "08:00:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "101000011",
"xValue": 5,
"time": "08:15:00",
"stopId": "29",
"passengers": 24
}, {
"yValue": "101000012",
"xValue": 5,
"time": "08:30:00",
"stopId": "29",
"passengers": 30
}, {
"yValue": "101000013",
"xValue": 5,
"time": "08:43:00",
"stopId": "29",
"passengers": 13
}, {
"yValue": "101000014",
"xValue": 5,
"time": "09:00:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "101000015",
"xValue": 5,
"time": "09:30:00",
"stopId": "29",
"passengers": 13
}, {
"yValue": "101000016",
"xValue": 5,
"time": "10:00:00",
"stopId": "29",
"passengers": 27
}, {
"yValue": "101000017",
"xValue": 5,
"time": "10:30:00",
"stopId": "29",
"passengers": 14
}, {
"yValue": "101000018",
"xValue": 5,
"time": "11:00:00",
"stopId": "29",
"passengers": 21
}, {
"yValue": "101000019",
"xValue": 5,
"time": "11:30:00",
"stopId": "29",
"passengers": 23
}, {
"yValue": "101000020",
"xValue": 5,
"time": "12:00:00",
"stopId": "29",
"passengers": 18
}, {
"yValue": "101000021",
"xValue": 5,
"time": "12:28:00",
"stopId": "29",
"passengers": 29
}, {
"yValue": "101000022",
"xValue": 5,
"time": "13:00:00",
"stopId": "29",
"passengers": 24
}, {
"yValue": "101000023",
"xValue": 5,
"time": "13:30:00",
"stopId": "29",
"passengers": 17
}, {
"yValue": "101000024",
"xValue": 5,
"time": "14:00:00",
"stopId": "29",
"passengers": 11
}, {
"yValue": "101000025",
"xValue": 5,
"time": "14:30:00",
"stopId": "29",
"passengers": 20
}, {
"yValue": "101000026",
"xValue": 5,
"time": "14:59:00",
"stopId": "29",
"passengers": 29
}],
"name": "Passengers"
}, {
"stopId": "48",
"data": [{
"yValue": "10100001",
"xValue": 5,
"time": "05:50:00",
"stopId": "48",
"passengers": 16
}, {
"yValue": "10100002",
"xValue": 5,
"time": "06:03:00",
"stopId": "48",
"passengers": 25
}, {
"yValue": "10100003",
"xValue": 5,
"time": "06:18:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "10100004",
"xValue": 5,
"time": "06:33:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "10100005",
"xValue": 5,
"time": "06:48:00",
"stopId": "48",
"passengers": 16
}, {
"yValue": "10100006",
"xValue": 5,
"time": "07:03:00",
"stopId": "48",
"passengers": 22
}, {
"yValue": "10100007",
"xValue": 5,
"time": "07:18:00",
"stopId": "48",
"passengers": 10
}, {
"yValue": "10100008",
"xValue": 5,
"time": "07:33:00",
"stopId": "48",
"passengers": 6
}, {
"yValue": "10100009",
"xValue": 5,
"time": "07:48:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "10101001",
"xValue": 5,
"time": "06:10:00",
"stopId": "48",
"passengers": 27
}, {
"yValue": "10101002",
"xValue": 5,
"time": "06:54:00",
"stopId": "48",
"passengers": 14
}, {
"yValue": "10101003",
"xValue": 5,
"time": "07:38:00",
"stopId": "48",
"passengers": 17
}, {
"yValue": "10101004",
"xValue": 5,
"time": "08:22:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "10110011",
"xValue": 5,
"time": "06:16:00",
"stopId": "149",
"passengers": 2
}, {
"yValue": "10110012",
"xValue": 5,
"time": "06:31:00",
"stopId": "149",
"passengers": 20
}, {
"yValue": "10110013",
"xValue": 5,
"time": "06:46:00",
"stopId": "149",
"passengers": 20
}, {
"yValue": "10110014",
"xValue": 5,
"time": "07:02:00",
"stopId": "149",
"passengers": 21
}, {
"yValue": "10110015",
"xValue": 5,
"time": "07:16:00",
"stopId": "149",
"passengers": 16
}, {
"yValue": "10110016",
"xValue": 5,
"time": "07:31:00",
"stopId": "149",
"passengers": 23
}, {
"yValue": "10110017",
"xValue": 5,
"time": "07:46:00",
"stopId": "149",
"passengers": 21
}, {
"yValue": "10110018",
"xValue": 5,
"time": "08:01:00",
"stopId": "149",
"passengers": 29
}, {
"yValue": "10110019",
"xValue": 5,
"time": "08:16:00",
"stopId": "149",
"passengers": 26
}, {
"yValue": "10111011",
"xValue": 5,
"time": "06:32:00",
"stopId": "5",
"passengers": 10
}, {
"yValue": "10111012",
"xValue": 5,
"time": "07:16:00",
"stopId": "5",
"passengers": 16
}, {
"yValue": "10111013",
"xValue": 5,
"time": "08:00:00",
"stopId": "5",
"passengers": 23
}, {
"yValue": "10111014",
"xValue": 5,
"time": "08:45:00",
"stopId": "5",
"passengers": 15
}, {
"yValue": "101000010",
"xValue": 5,
"time": "08:03:00",
"stopId": "48",
"passengers": 28
}, {
"yValue": "101000011",
"xValue": 5,
"time": "08:18:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "101000012",
"xValue": 5,
"time": "08:33:00",
"stopId": "48",
"passengers": 26
}, {
"yValue": "101000013",
"xValue": 5,
"time": "08:46:00",
"stopId": "48",
"passengers": 27
}, {
"yValue": "101000014",
"xValue": 5,
"time": "09:03:00",
"stopId": "48",
"passengers": 13
}, {
"yValue": "101000015",
"xValue": 5,
"time": "09:33:00",
"stopId": "48",
"passengers": 21
}, {
"yValue": "101000016",
"xValue": 5,
"time": "10:03:00",
"stopId": "48",
"passengers": 18
}, {
"yValue": "101000017",
"xValue": 5,
"time": "10:33:00",
"stopId": "48",
"passengers": 18
}, {
"yValue": "101000018",
"xValue": 5,
"time": "11:03:00",
"stopId": "48",
"passengers": 28
}, {
"yValue": "101000019",
"xValue": 5,
"time": "11:33:00",
"stopId": "48",
"passengers": 29
}, {
"yValue": "101000020",
"xValue": 5,
"time": "12:03:00",
"stopId": "48",
"passengers": 21
}, {
"yValue": "101000021",
"xValue": 5,
"time": "12:31:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "101000022",
"xValue": 5,
"time": "13:03:00",
"stopId": "48",
"passengers": 19
}, {
"yValue": "101000023",
"xValue": 5,
"time": "13:33:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "101000024",
"xValue": 5,
"time": "14:03:00",
"stopId": "48",
"passengers": 4
}, {
"yValue": "101000025",
"xValue": 5,
"time": "14:33:00",
"stopId": "48",
"passengers": 30
}, {
"yValue": "101000026",
"xValue": 5,
"time": "15:02:00",
"stopId": "48",
"passengers": 21
}],
"name": "Passengers"
}, {
"stopId": "30",
"data": [{
"yValue": "10100001",
"xValue": 5,
"time": "05:52:00",
"stopId": "30",
"passengers": 12
}, {
"yValue": "10100002",
"xValue": 5,
"time": "06:06:00",
"stopId": "30",
"passengers": 18
}, {
"yValue": "10100003",
"xValue": 5,
"time": "06:21:00",
"stopId": "30",
"passengers": 1
}, {
"yValue": "10100004",
"xValue": 5,
"time": "06:36:00",
"stopId": "30",
"passengers": 7
}, {
"yValue": "10100005",
"xValue": 5,
"time": "06:51:00",
"stopId": "30",
"passengers": 21
}, {
"yValue": "10100006",
"xValue": 5,
"time": "07:06:00",
"stopId": "30",
"passengers": 27
}, {
"yValue": "10100007",
"xValue": 5,
"time": "07:21:00",
"stopId": "30",
"passengers": 11
}, {
"yValue": "10100008",
"xValue": 5,
"time": "07:36:00",
"stopId": "30",
"passengers": 18
}, {
"yValue": "10100009",
"xValue": 5,
"time": "07:51:00",
"stopId": "30",
"passengers": 26
}, {
"yValue": "10101001",
"xValue": 5,
"time": "06:13:00",
"stopId": "30",
"passengers": 29
}, {
"yValue": "10101002",
"xValue": 5,
"time": "06:57:00",
"stopId": "30",
"passengers": 24
}, {
"yValue": "10101003",
"xValue": 5,
"time": "07:41:00",
"stopId": "30",
"passengers": 30
}, {
"yValue": "10101004",
"xValue": 5,
"time": "08:25:00",
"stopId": "30",
"passengers": 4
}, {
"yValue": "10110011",
"xValue": 5,
"time": "06:17:00",
"stopId": "51",
"passengers": 5
}, {
"yValue": "10110012",
"xValue": 5,
"time": "06:32:00",
"stopId": "51",
"passengers": 15
}, {
"yValue": "10110013",
"xValue": 5,
"time": "06:47:00",
"stopId": "51",
"passengers": 13
}, {
"yValue": "10110014",
"xValue": 5,
"time": "07:03:00",
"stopId": "51",
"passengers": 28
}, {
"yValue": "10110015",
"xValue": 5,
"time": "07:17:00",
"stopId": "51",
"passengers": 6
}, {
"yValue": "10110016",
"xValue": 5,
"time": "07:32:00",
"stopId": "51",
"passengers": 25
}, {
"yValue": "10110017",
"xValue": 5,
"time": "07:47:00",
"stopId": "51",
"passengers": 20
}, {
"yValue": "10110018",
"xValue": 5,
"time": "08:02:00",
"stopId": "51",
"passengers": 11
}, {
"yValue": "10110019",
"xValue": 5,
"time": "08:17:00",
"stopId": "51",
"passengers": 15
}, {
"yValue": "10111011",
"xValue": 5,
"time": "06:34:00",
"stopId": "56",
"passengers": 25
}, {
"yValue": "10111012",
"xValue": 5,
"time": "07:18:00",
"stopId": "56",
"passengers": 30
}, {
"yValue": "10111013",
"xValue": 5,
"time": "08:02:00",
"stopId": "56",
"passengers": 22
}, {
"yValue": "10111014",
"xValue": 5,
"time": "08:47:00",
"stopId": "56",
"passengers": 25
}, {
"yValue": "101000010",
"xValue": 5,
"time": "08:06:00",
"stopId": "30",
"passengers": 15
}, {
"yValue": "101000011",
"xValue": 5,
"time": "08:21:00",
"stopId": "30",
"passengers": 24
}, {
"yValue": "101000012",
"xValue": 5,
"time": "08:36:00",
"stopId": "30",
"passengers": 30
}, {
"yValue": "101000013",
"xValue": 5,
"time": "08:49:00",
"stopId": "30",
"passengers": 23
}, {
"yValue": "101000014",
"xValue": 5,
"time": "09:06:00",
"stopId": "30",
"passengers": 26
}, {
"yValue": "101000015",
"xValue": 5,
"time": "09:36:00",
"stopId": "30",
"passengers": 26
}, {
"yValue": "101000016",
"xValue": 5,
"time": "10:06:00",
"stopId": "30",
"passengers": 8
}, {
"yValue": "101000017",
"xValue": 5,
"time": "10:36:00",
"stopId": "30",
"passengers": 24
}, {
"yValue": "101000018",
"xValue": 5,
"time": "11:06:00",
"stopId": "30",
"passengers": 7
}, {
"yValue": "101000019",
"xValue": 5,
"time": "11:36:00",
"stopId": "30",
"passengers": 20
}, {
"yValue": "101000020",
"xValue": 5,
"time": "12:06:00",
"stopId": "30",
"passengers": 12
}, {
"yValue": "101000021",
"xValue": 5,
"time": "12:34:00",
"stopId": "30",
"passengers": 25
}, {
"yValue": "101000022",
"xValue": 5,
"time": "13:06:00",
"stopId": "30",
"passengers": 18
}, {
"yValue": "101000023",
"xValue": 5,
"time": "13:36:00",
"stopId": "30",
"passengers": 22
}, {
"yValue": "101000024",
"xValue": 5,
"time": "14:06:00",
"stopId": "30",
"passengers": 27
}, {
"yValue": "101000025",
"xValue": 5,
"time": "14:36:00",
"stopId": "30",
"passengers": 29
}, {
"yValue": "101000026",
"xValue": 5,
"time": "15:05:00",
"stopId": "30",
"passengers": 23
}],
"name": "Passengers"
}];
var margins = {
top: 12,
left: 100,
right: 20,
bottom: 34
};
var legendPanel = {
width: 100
};
var numberOfRecords = 0;
var dataset = dataset.map(function(d) {
numberOfRecords = 0;
return d.data.map(function(o, i) {
numberOfRecords++;
return {
y: o.xValue,
x: o.yValue,
name: d.name,
stopId: o.stopId,
passengers: o.passengers,
time: o.time
};
});
});
d3.select(window).on("resize", throttle);
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(group) {
return group.map(function(d) {
// Invert the x and y values, and y0 becomes x0
return {
x: d.y,
y: d.x,
x0: d.y0,
name: d.name,
stopId: d.stopId,
passengers: d.passengers,
time: d.time
};
});
});
var yValuesTripId = dataset[0].map(function(d) {
return d.y;
});
var yValuesFirstStopTimes = dataset[0].map(function(d) {
return d.time.slice(0, -3);
});
var yValuesLastStopTimes = dataset[dataset.length - 1].map(function(d) {
return d.time.slice(0, -3);
});
var xMax = d3.max(dataset, function(group) {
return d3.max(group, function(d) {
return d.x + d.x0;
});
});
var tooltip = d3.select("#chartDiv")
.append('div')
.attr('id', 'tooltip')
.attr('class', 'hidden');
const chartArea = $("#chartDiv");
var width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
var barHeight = 10;
var height = (numberOfRecords * 40) - margins.top - margins.bottom;
var svg, xScale, yScaleLeft, yScaleRight, rects;
draw(width, height);
function draw(width, height) {
svg = d3.select("#chartDiv")
.append('svg')
.attr('width', width + margins.left + margins.right)
.attr('height', height + margins.top + margins.bottom)
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
xScale = d3.scale.linear()
.domain([0, xMax])
.range([0, width - margins.right]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
yScaleLeft = d3.scale.ordinal()
.domain(d3.range(0, yValuesFirstStopTimes.length))
.rangeRoundBands([0, height], .1);
var yAxisLeft = d3.svg.axis()
.scale(yScaleLeft)
.orient('left')
.tickFormat(function(d,i){
return yValuesFirstStopTimes[i];
});
yScaleRight = d3.scale.ordinal()
.domain(d3.range(0, yValuesLastStopTimes.length))
.rangeRoundBands([0, height], .1);
var yAxisRight = d3.svg.axis()
.scale(yScaleRight)
.orient('right')
.tickFormat(function(d,i){
return yValuesLastStopTimes[i];
});
var groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g');
rects = groups.selectAll('rect')
.data(function(d) {
return d;
})
.enter()
.append('rect')
.attr('x', function(d) {
return xScale(d.x0);
})
.attr('y', function(d, i) {
return yScaleLeft(d.y);
})
.attr('height', function(d) {
return barHeight;
})
.attr('width', function(d) {
return xScale(d.x);
})
.attr('fill', function(d) {
return getColor(d.passengers);
})
.attr('stroke', 'white')
.on('mouseover', function(d) {
var xPos = d3.event.pageX - 310;
var yPos = d3.event.pageY - 110;
d3.select('#tooltip')
.style("left", xPos + "px")
.style("top", yPos + "px")
.style('width', '250px')
.text("Trip " + d.y + '|Passengers:' + d.passengers + '|Stop ' + d.stopId + '|time ' + d.time);
d3.select('#tooltip').classed('hidden', false);
})
.on('mouseout', function() {
d3.select('#tooltip').classed('hidden', true);
});
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.call(yAxisLeft);
/* svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + width + ",200)")
.call(yAxisRight); */
const newWidth = width - 20;
svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + newWidth + ",0)")
.call(yAxisRight);
var legend = d3.select("#chartDiv")
.append('div')
.attr('id', 'legend')
.attr('class', 'row legend-row');
legend.append('div')
.attr('class', 'col-sm-4');
const legendInfo = [{
"color": "grey",
"text": "Low occupancy less than 10 passengers"
}, {
"color": "yellow",
"text": "Medium occupancy 10 to 20 passengers"
}, {
"color": "orange",
"text": "High occupancy 20 to 25 passengers"
}, {
"color": "red",
"text": "Crowded more than 25 passengers"
}, ]
$.each(legendInfo, function(idx, info) {
let legendSection = legend.append('div')
.attr('class', 'col-sm-4');
legendSection.append('div')
.attr('class', 'legend-element')
.attr('style', 'background-color:' + info.color);
legendSection.append('div')
.attr('style', 'margin-left: 15px;')
.text(info.text)
});
}
function redraw() {
width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
d3.select('svg').remove();
d3.select('#legend').remove();
draw(width, height);
}
var throttleTimer;
function throttle() {
window.clearTimeout(throttleTimer);
throttleTimer = window.setTimeout(function() {
redraw();
}, 200);
}
function getColor(numberOfPassengers) {
cellColor = "";
if (numberOfPassengers < 10) {
cellColor = "grey";
} else if (numberOfPassengers < 20) {
cellColor = "yellow";
} else if (numberOfPassengers < 25) {
cellColor = "orange";
} else {
cellColor = "red";
}
return cellColor;
}#chartDiv #xaxis .domain {
fill: none;
stroke: #000;
}
#chartDiv #xaxis text,
#yaxis text {
font-size: 12px;
}
#chartDiv .axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
display: none;
}
#chartDiv .axis text {
font-family: sans-serif;
font-size: 11px;
}
#chartDiv #tooltip {
position: absolute;
text-align: center;
display: inline-block;
font: 12px sans-serif;
border: 0px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}
#chartDiv #tooltip.hidden {
display: none;
}
#chartDiv #tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
#chartDiv .legend-row {
height: 50px;
}
#chartDiv .legend-element {
width: 10px;
height: 20px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>
类似资料：
-
我试图在3.2.0中创建一个混合堆叠的水平条形图和折线图Charts.js。 预期行为：一个轴在底部的堆叠条，包括轴标题和一个轴在顶部的折线图。 实际行为：底部的所有轴都显示了一个额外的轴，该轴似乎与任何数据集都不对应。不显示轴标题。 注意:代码中有几个条形的值为零，根据生成的数据，这些值可以是非零的。 我的代码： jsfiddle 当前行为的屏幕截图
-
我创建了一个水平条形图w/chart.js，需要在y轴上创建两组标签，但只能创建一个。 例如，参见下图，在y轴上，我有一组单词“other”和“paper ”,计数分别为2和3；在这个分组和下面的两个分组中，我还需要显示与这两个词相关的月份——比如五月。 有办法做到这一点吗？ 附言：在附加的图像中，我将镜像设置为true，但如果解决方案能给我所需的输出，我愿意关闭镜像。 到目前为止，我已经查看了这
-
目前我正在编写一个水平轴上的堆叠条形图的代码。但是我不知道如何设置.attr（x,...）来确保输入的每个rect都在条的末尾，从而填满空间。你能帮忙吗？
-
我很难创建一个条形图，其中包含两个不同的y轴和每个x值（类别）的两个条形图。我有不同类型的数据类别（见下文），每个类别我都有两个值，我想并排绘制（和）。但是，每个类别的值相距甚远，这使得类别的条形几乎不可见。因此，我想添加第二个y轴（一个用于，一个用于），以允许在两个类别之间进行比较。 示例数据： 我使用下面的R代码(ggplot2)来创建绘图: 和，但我没有设法将y轴分配给数据类型。 我很高兴每
-
问题内容： 我正在尝试使用创建水平堆叠的条形图，但是我看不到如何使条形实际堆叠，而不是全部从y轴开始。 这是我的测试代码。 看到tcaswell的评论后，编辑使用kwarg。 这似乎是正确的方法，但是如果没有特定条形的数据，则尝试失败，因为它正尝试添加到随后返回的值。 问题答案： 由于您使用的是熊猫，因此值得一提的是，您可以在本地进行堆积条形图： 请参阅 文档的可视化部分。
-
我正在使用chartjs版本：2.1.4在MVC应用程序中创建图表。我正在使用控制条形图的宽度，以进行固定宽度设置。它在只有条形图的情况下工作正常，但在“堆叠条形图”的情况下，我无法确定条形图的宽度。我正在使用以下代码创建堆叠条形图，如下所示： 在这种情况下，"barper"属性不起作用。请在"chartjs版本： 2.1.4"中建议我解决方案。 提前谢谢