Question

我想在X轴的每对值之间垂直对齐图表的条形。

我的条形图的当前版本为：https://image.noelshack.com/fichiers/2019/29/3/1563363518-barchartscreenshot.png

我想做的是：https://image.noelshack.com/fichiers/2019/29/3/1563363518-centeredbarsobjective.png

这是用于具有以下依赖关系的Angular 7应用程序，以使用chart.js：“ chart.js”：“ ^ 2.8.0”，“ chartjs-plugin-datalabels”：“ ^ 0.6.0”，“ ng2 -charts“：” ^ 2.2.0“

这是我的条形图的配置：

  public barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [
        {
          barPercentage: 0.9,
          categoryPercentage: 1.0,
          stacked: true,
          type: 'time',
          time: {
            parser: 'HH',
            unit: 'hour',
            unitStepSize: 1,
            displayFormats: {
                hour: 'HH',
            }
          }
        },
      ],
      yAxes: [{
          stacked: true
        }
      ]
    },
    legend: { 
      position: 'bottom' 
    },
    title: {
      display: true,
      text: 'Data distribution',
      position: 'top'
    },
    plugins: {
      datalabels: {
        display: true,
        align: 'center',
        anchor: 'center'
      }
    }
  };
  public barChartLabels: Label[] = ['12','13','14','15'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels];
  public barChartData: ChartDataSets[] = [{
    data: [40, 80, 60], 
    label: 'Series A' 
  },
  {
    data: [10, 30, 50], 
    label: 'Series B'

  }];

Stackblitz of the problem

感谢您的帮助：）

卢卡斯

时间类型条形图中2个x轴值之间的条形位置

0 个答案: