图表.JS混合图表 - 条形不显示

Question

我正在使用ChartJS和Alpha-Vantage API构建一个图形。在大多数情况下，它按预期工作。

但这只有在每个数据集都绘制为折线图时(所以我的数据肯定在那里(。

问题是，我希望我的交易量数据集是条形图。无论出于何种原因，条形都没有显示在图表上。

正确的刻度出现在右侧，但条形无处可见......

我的控制台中没有错误，并且我已经尝试了一些在 StackOverflow 上找到的东西，但到目前为止似乎没有一个对我有用 - 例如。 将刻度设置为 0，增加和减少条形/类别百分比。但我的运气为零。

我错过了什么？ 我是否错过了某种配置设置或？

var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
label: "Open",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(75, 214, 238)',
borderColor: 'rgb(75, 214, 238)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(75, 214, 238)',
pointBackgroundColor: 'rgb(75, 214, 238)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(75, 214, 238)',
pointHoverBorderColor: 'rgb(75, 214, 238)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [open[0], open[1], open[2], open[3], open[4], open[5], open[6]],
},
{
label: "High",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(210, 221, 72)',
borderColor: 'rgb(210, 221, 72)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(210, 221, 72)',
pointBackgroundColor: 'rgb(210, 221, 72)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(210, 221, 72)',
pointHoverBorderColor: 'rgb(210, 221, 72)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [high[0], high[1], high[2], high[3], high[4], high[5], high[6]],
},
{
label: "Low",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(238, 79, 75)',
borderColor: 'rgb(238, 79, 75)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(238, 79, 75)',
pointBackgroundColor: 'rgb(238, 79, 75)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(238, 79, 75)',
pointHoverBorderColor: 'rgb(238, 79, 75)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [low[0], low[1], low[2], low[3], low[4], low[5], low[6]],
},
{
label: "Close",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(28, 175, 154)',
borderColor: 'rgb(28, 175, 154)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(28, 175, 154)',
pointBackgroundColor: 'rgb(28, 175, 154)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(28, 175, 154)',
pointHoverBorderColor: 'rgb(28, 175, 154)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [close[0], close[1], close[2], close[3], close[4], close[5], close[6]],
},
{
label: 'Volume', //1D2939
type: 'bar',
yAxisID: 'y-axis-b',
data: [volume[0], volume[1], volume[2], volume[3], volume[4], volume[5], volume[6]],
barPercentage: '1',
categoryPercentage: '1',
backgroundColor: 'rgb(29, 41, 57)',
borderColor: 'rgb(29, 41, 57)',
borderWidth: '1',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgb(29, 41, 57)',
hoverBorderColor: 'rgb(29, 41, 57)',
hoverBorderWidth: '3',
},
]
},
options: {
title: {
display: true,
text: 'Share Price - Past 7 Days',
fontSize: '20',
fontFamily: 'Open Sans, sans-serif',
// fontColor
// fontStyle
// padding
// lineHeight
},
scales: {
xAxes: [{
ticks: {
min: 0
}
}],
yAxes: [{
position: "left",
id: "y-axis-a",
}, {
position: "right",
id: "y-axis-b",
}]
}
}
});

Answer 1

混合图表类型文档没有明确说明，但似乎基本图表必须是类型bar，然后将数据集切换到line。

var dates = ['a', 'b', 'c', 'd', 'e', 'f', 'h'];
var open = [1,2,3,4,2,5,1];
var high = [7,4,3,3,3,4,6];
var low = [7,2,2,4,7,6,3];
var close = [9,5,3,4,2,3,4];
var volume = [4,2,1,5,3,6,8];
var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
type: 'line',
label: "Open",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(75, 214, 238)',
borderColor: 'rgb(75, 214, 238)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(75, 214, 238)',
pointBackgroundColor: 'rgb(75, 214, 238)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(75, 214, 238)',
pointHoverBorderColor: 'rgb(75, 214, 238)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [open[0], open[1], open[2], open[3], open[4], open[5], open[6]],
},
{
type: 'line',
label: "High",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(210, 221, 72)',
borderColor: 'rgb(210, 221, 72)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(210, 221, 72)',
pointBackgroundColor: 'rgb(210, 221, 72)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(210, 221, 72)',
pointHoverBorderColor: 'rgb(210, 221, 72)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [high[0], high[1], high[2], high[3], high[4], high[5], high[6]],
},
{
type: 'line',
label: "Low",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(238, 79, 75)',
borderColor: 'rgb(238, 79, 75)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(238, 79, 75)',
pointBackgroundColor: 'rgb(238, 79, 75)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(238, 79, 75)',
pointHoverBorderColor: 'rgb(238, 79, 75)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [low[0], low[1], low[2], low[3], low[4], low[5], low[6]],
},
{
type: 'line',
label: "Close",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(28, 175, 154)',
borderColor: 'rgb(28, 175, 154)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(28, 175, 154)',
pointBackgroundColor: 'rgb(28, 175, 154)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(28, 175, 154)',
pointHoverBorderColor: 'rgb(28, 175, 154)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [close[0], close[1], close[2], close[3], close[4], close[5], close[6]],
},
{
label: 'Volume', //1D2939
yAxisID: 'y-axis-b',
data: [volume[0], volume[1], volume[2], volume[3], volume[4], volume[5], volume[6]],
barPercentage: '1',
categoryPercentage: '1',
backgroundColor: 'rgb(29, 41, 57)',
borderColor: 'rgb(29, 41, 57)',
borderWidth: '1',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgb(29, 41, 57)',
hoverBorderColor: 'rgb(29, 41, 57)',
hoverBorderWidth: '3',
},
]
},
options: {
title: {
display: true,
text: 'Share Price - Past 7 Days',
fontSize: '20',
fontFamily: 'Open Sans, sans-serif',
// fontColor
// fontStyle
// padding
// lineHeight
},
scales: {
xAxes: [{
ticks: {
min: 0
}
}],
yAxes: [{
position: "left",
id: "y-axis-a",
}, {
position: "right",
id: "y-axis-b",
}]
}
}
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="QGL_Chart"></canvas>