Chart.JS混合图表 - 酒吧没有显示

问题描述 投票：5回答：1

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

但这只是将每个数据集绘制成线图（所以我的数据肯定存在）。

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

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

我的控制台没有错误，我已经尝试了一些我在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",
          }]
        }
    }
  });
javascript chart.js chart.js2
1个回答
2
投票

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.