Chart JS 中体积数据集的较小比例

Question

我正在绘制一些股票数据的图表，我想将体积放在底部的一个较小的灰色条数据集中，就像在 Yahoo Finance 中一样。

我想要的：

小灰色数据集在底部。

我得到的：

三个不同的Y尺度，体积数据集大小相同

我的代码：

当我创建图表时：

new Chart(context, {
    type: 'line',
    data: {
      labels: timestamps.map(n => 
        (new Date(n * 1000)).toLocaleString()
      ),
      datasets: [
        dataset,
        vdataset
      ]
    },
    options: {
      maintainAspectRatio: false,
      scales: {
        xAxis: {
          // type: 'time'
          ticks: {
            //autoSkip: true,
            maxTicksLimit: 10
          }
        },
        yAxes: [{
          id: 'volume',
          display: false
        }],
        y: {
          beginAtZero: false
        },
      },
      animation: {
        duration: 0
      },
      plugins: {
        autocolors: false,
        annotation: {
          annotations
        }
      },
      tooltips: {
        mode: 'nearest'
      },
      hover: {
        intersect: false
      }
    }
  });

体积数据集：

{
    type: 'bar',
    label: `Volume`,
    data: ...,
    backgroundColor: 'transparent',
    borderColor: 'grey',
    fill: 'origin',
    pointRadius: 0,
    borderWidth: 2,
    yAxisID: 'volume'
  }

Answer 1

你需要给每个数据集一个 yAxisID 然后你应该用这个 id 命名你的轴：

数据：

var data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1,
    yAxisID: "something",
  },
  {
    label: 'My Second Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(182, 50, 192)',
    tension: 0.1,
    yAxisID: "volume",
  },
  ]
};

体重秤：

scales: {
    volume: {
        axis: "y",  
        min: -80,
        max: 60,
        position: 'right',
    },
    something: {
        axis: "y",
        min: -20,
        max: 70,
        position: 'left',
    }
}

此外，您不应该拥有列表 yAxes，这就是 chartjs 中轴的定义方式 2.x

这是一个 fiddle 以查看其使用情况：JSFiddle

编辑： 如果你想要一个不可见的轴，只需将 display 设置为 false，如现在更新的 Fiddle.

Chart JS 中体积数据集的较小比例

Smaller scale for volume dataset in Chart JS

javascript

dataset

scale

chart.js

我想要的：

我得到的：

我的代码：

当我创建图表时：

体积数据集：