在chartjs中绘制混合堆叠的水平条/线

Question

我看过chartjs的文档/示例，但有人知道如何做到以下几点吗？

• 创建宽度(x轴(可变但高度始终为满(即整个y轴(的条形图
• 图表中可以有x个条形图
• 创建一条横跨x轴但可以更改y轴的线(也就是说，不是直线，而是曲线(

我这里有一张粗略的图，黄色是条形图，黑色是线

• https://ibb.co/3M95JGv

我使用堆叠的条形图和交换轴来完成第一部分，但y轴(条形图高度(仅设置为1。当试图在混合模式下绘制曲线时，这是一个问题，因为只有一个y轴点(而不是许多y轴点(：

• https://codepen.io/anon/pen/wVqONp

这是另一个尝试，它有多个y轴点，但我无法控制条宽度：

• https://codepen.io/uglyhobbitfeet/pen/YzzLmNE?editors=1010

如果有人能帮忙(或者至少告诉我我的方向是否正确(，我们将不胜感激！

Please see code in the jsfiddle link

Answer 1

嗯，这很难。。。我唯一的解决方案是创建一个有很多非常小的条形图。

我用我的解决方案制作了一个JSBin，但它还远远不够完美，但这是在chart.js中实现它的唯一方法。我没有测试性能，因为我不知道你的数据，但这将是非常重要的，也是最大的问题。

目前，只有一个矩形是可能的，但将其改进为多个矩形并不困难。

这是我所有的代码，与JSBin:相同

var chartData = {
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: 'blue',
borderWidth: 2,
fill: false,
data: []
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: 'red',
data: [],
}]
};
var newData0 = []
var newData1 = []
var labels = []
var counter = 50
// Rectangle between two random Integers
var rectangleBetween = [Math.round(Math.random()*counter), Math.round(Math.random()*counter)]
rectangleBetween.sort(function(a, b){return a - b})
for (var i = 0; i < counter; i++) {
labels.push(i)
// Data for Dataset 1 (line):
var newObj0 = {}
newObj0.x = i
// 50/50 chance of data
if (Math.random()<0.5) {
newObj0.y = Math.round(Math.random()*100)
} else {
newObj0.y = null
}
newData0.push(newObj0)
// Data for Dataset 2 (bar):
var newObj1 = {}
if (i >= rectangleBetween[0] && i <= rectangleBetween[1]) {
newObj1.x = i
newObj1.y = 100
} else {
newObj1.x = i
newObj1.y = 0
}  
newData1.push(newObj1)
}
chartData.datasets[0].data = newData0
chartData.datasets[1].data = newData1
chartData.labels = labels

var ctx = document.getElementById('chart').getContext('2d');
myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
spanGaps: true,
title: {
display: true,
text: 'Chart.js Combo Bar Line Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
//barThickness: 80, // number (pixels) or 'flex'
//maxBarThickness: 100, // number (pixels)
barPercentage: 1.0,
categoryPercentage: 1.0,
gridLines: {
display: false
}
}]
}
}
});

Answer 2

看起来这是最好的解决方案：

https://codepen.io/kurkle/pen/ExxdyXQ

var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Bar1",
data: [[2.5, 5.7]],
},
{
label: "Bar2",
data: [[6, 8]],
},
{
label: "Bar3",
data: [[9,10]],
},
{
label: "Line",
type: "line",
backgroundColor: "rgb(75, 192, 192, 0.5)",
borderColor: "rgb(75, 192, 192)",
fill: false,
tension: 0,
data: [11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
yAxisID: "line"
}
]
},
options: {
datasets: {
horizontalBar: {
backgroundColor: "rgb(255, 99, 132, 0.5)",
borderColor: "rgb(255, 99, 132)",
borderWidth: 1,
barPercentage: 1,
categoryPercentage: 1,
yAxisID: "bar"
}
},
scales: {
yAxes: [
{
id: "bar",
type: 'category',
stacked: true,
labels: ['bar'],
offset: true
},
{
id: "line",
position: 'right',
ticks: {
min: 0,
stepSize: 1
}
}
]
}
}
});

这要归功于这个代码的原始作者(Jukka Kurkela aka kurkle(。他在chart.js GitHub问题页面上回答了这个问题。