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

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混合图表-条形未显示

1 个答案: