ChartJS-堆积的水平条形图上的散点

时间:2019-12-26 09:01:12

标签: chart.js

我正在ChartJS上绘制堆叠的水平条形图,并希望在第二x轴上基于数值放置点。

  if (barChartBox) {
    const barCtx = barChartBox.getContext('2d');

    new Chart(barCtx, {
      type: 'horizontalBar',
      data: {
        yLabels: ['Income'],
        datasets: [{
          label           : 'Realised',
          backgroundColor : COLORS['teal-500'],
          borderColor     : COLORS['teal-800'],
          borderWidth     : 1,
          data            : [5255],
        }, {
          label           : 'Planned',
          backgroundColor : COLORS['amber-500'],
          borderColor     : COLORS['amber-800'],
          borderWidth     : 1,
          data            : [1052],
        }, {
          label           : 'Potential',
          backgroundColor : COLORS['grey-500'],
          borderColor     : COLORS['grey-800'],
          borderWidth     : 1,
          data            : [2060],
        }, {
          label           : 'Target',
          type            : 'line',
          backgroundColor : COLORS['red-500'],
          borderColor     : COLORS['red-800'],
          fill            : false,
          showLine        : false,
          data            : [{x: 6361, y:1}],
          xAxisID         : 'secondary-axis'
        }]
      },
      options: {
        responsive: true,
        legend: {
          position: 'bottom',
        },
        scales: {
          xAxes: [{
            stacked: true,
            ticks: {
              callback: function(value, index, values) {
                return value.toLocaleString();
              }
            }
          }, {
            id: 'secondary-axis',
            display: false
          }],
          yAxes: [{
            stacked: true,
            ticks: {
              beginAtZero: true,
              max: 1
            }
          }]
        },
        title: {
          display: true,
          text: 'Amounts in SGD \'000'[![enter image description here][1]][1]
        },
      },
    });
  }

我已经尝试了一些变体/排列,但是不确定这里出了什么问题。该点没有显示出来。

当前图表(它还显示x的{​​{1}}值不正确): Current chart

预期图表: Intended chart

我在这里做什么错了?

0 个答案:

没有答案