Question

我正在用ChartJS设置深度图，用于加密货币数据。我使用了混合图表功能，当2张图表保持相同位置时，它看起来不正确

此图表有一些示例。我在Coinbase和Houbi进行了检查，并试图跟随但没有运气。我使用了具有2个对象的数据集。第一个是第一个图表的数据，第二个是第二个图表的数据。

const SIDES = {
  BUY: 'buy',
  SELL: 'sell'
};

const LABEL = {
  [SIDES.BUY]: 'Ask',
  [SIDES.SELL]: 'Bid'
};

const STYLING = {
  FONT_COLOR: '#737687',
  BORDER: '#737687',
  [SIDES.BUY]: { color: '#25C050' },
  [SIDES.SELL]: { color: '#DC3545' }
};

const OPTIONS = {
  global: {
    defaultFontColor: STYLING.FONT_COLOR,
    defaultFontFamily: 'Circular',
    responsive: true,
    maintainAspectRatio: false
  },
  scales: {
    xAxes: [
      {
        barPercentage: 1,
        categoryPercentage: 1,
        gridLines: {
          color: STYLING.BORDER,
          drawOnChartArea: false
        }
      }
    ],
    yAxes: [
      {
        gridLines: {
          color: STYLING.BORDER,
          drawOnChartArea: false
        }
      }
    ]
  }
};


const FORMULA = {
  createLabels: (buyLabels, sellLabels) => [...buyLabels, ...sellLabels],
  createSellData: sellData => sellData,
  createBuyData: buyData => buyData.reverse()
};

const CHART_CONFIG = (sellLabels, sellData, buyLabels, buyData) => {
  const listLabels = FORMULA.createLabels(buyLabels, sellLabels);

  return {
    type: 'bar',
    data: {
      labels: listLabels,
      datasets: [
        {
          side: SIDES.BUY,
          label: LABEL[SIDES.BUY],
          backgroundColor: STYLING[SIDES.BUY].color,
          borderColor: STYLING[SIDES.BUY].color,
          data: FORMULA.createBuyData(buyData)
        },
        {
          side: SIDES.SELL,
          label: LABEL[SIDES.SELL],
          backgroundColor: STYLING[SIDES.SELL].color,
          borderColor: STYLING[SIDES.SELL].color,
          data: FORMULA.createSellData(sellData)
        }
      ]
    },
    options: OPTIONS
  };
};

export { STYLING, CHART_CONFIG, FORMULA, SIDES };

预期： https://imgur.com/a/C6xYniI

我完成的实际操作（请不要介意样式，我只想拥有相同的结构） https://imgur.com/mM3kc7n

绿色的应该在左边，红色的应该在右边。

我做了折线图，看起来还不错： https://imgur.com/lRgTjZ4

我想知道酒吧酒吧是否还有其他办法。

有什么方法可以用Chart JS创建深度图？

0 个答案: