Chart.JS 混合图表 - 柱状图未显示

Question

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

但这只是在每个数据集都被绘制成折线图的情况下（所以我的数据肯定在那里）。

事实是，我希望我的 Volume 数据集是柱状图。无论出于何种原因，条形图都没有显示在图表上。

正确的刻度显示在右侧，但看不到条...

我的控制台没有错误，我已经尝试了一些我在 Whosebug 上找到的东西，但 none 到目前为止似乎对我有用 - 例如。将刻度设置为 0，增加和减少 bar/category 百分比。但是我的运气是零。

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

      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

Mixed Chart Types documentation 没有明确说明，但似乎基本图表必须是类型 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>

Chart.JS 混合图表 - 柱状图未显示

Chart.JS Mixed Chart - Bars Not Showing

javascript

chart.js

chart.js2