Question

我不确定是否可以做到这一点，但是我正在用chartjs写一个有角度的页面。我有一个水平条形图的多个数据集。我能够使其重叠，但我想更改条形的宽度之一。为了获得重叠，我使用了一个插件来更改条形的高度，如下所示

如您所见，两个数据集都以y = 0到y =某个最大值的条形显示。我想将栏的宽度之一更改为窄。目的是要有一个长条，另一个条要窄，并置于最大值。当我同时更改一个条形的高度和宽度时，我得到以下图表，这是不正确的。

我不确定为什么条形图突然从图表的顶部开始。我想我可能没有正确设置这些值。

感谢您的帮助。

export class AppComponent implements OnInit {
  title = 'barchart';
  private chartRef
  @ViewChild('myChart') set ref(ref: ElementRef) {
     this.chartRef = ref;
   }


  ngOnInit() {
    var data = {
      labels: ["x1", "x2", "x3"],
      datasets: [{
        label: "First",
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        data: [10, 20, 30],
        yAxesID : "y-axis-1",
      }, 
      {
        label: "Second",
        backgroundColor: 'rgba(255, 206, 86, 0.2)',
        borderWidth: 1,
        data: [5, 30, 35],
        yAxesID : "y-axis-1",
      }]
    };

    var options = {
      scales: {
        xAxes: [{
         stacked: false,
          display: true,
          barThickness: 70,
          ticks: {
            beginAtZero: true
          },          
        }],
        yAxes: [{
         stacked: true,
          id: "y-axis-1",
          ticks: {
            beginAtZero: true
          },   
        }]

      }
    };


    var canvas = <HTMLCanvasElement> document.getElementById("myChart");
    var ctx = canvas.getContext("2d")

    var myBarChart = new Chart(ctx, {

       plugins:[{
         afterDatasetsUpdate: function (chart) {
           Chart.helpers.each(chart.getDatasetMeta(0).data, function (rectangle, index) {


            rectangle._view.height = rectangle._model.height = 30;

            rectangle._view.width = rectangle._model.width = 10;


           });
       },
      }],
      type: 'horizontalBar',
     // type: 'bar',
      data: data,
      options: options
    });
  }
}

我对以下代码进行了一些更改，并获得了以下结果。我希望让黑条分别在3个条中分别渲染，但到目前为止，黑条不能正确渲染。是否有设置来启动黄色条中的三个黑色条中的每一个？

！https://imgur.com/a/SkOa8ew

var data = {
  labels: ["x1", "x2", "x3"],
  datasets: [{
    label: "First",
    backgroundColor: 'black',
    borderWidth: 1,
    data: [10, 20, 30],
  //  xAxisID: "x-axis-1",
    yAxesID : "y-axis-1",
  }, 
  {
    label: "Second",
    backgroundColor: 'rgba(255, 206, 86, 0.2)',
    borderWidth: 1,
    data: [5, 30, 35],
    yAxesID : "y-axis-2",
  }]
};

var options = {
  scales: {
    xAxes: [

    {
      stacked: false,
      display: true,
     // barThickness: 10,
   //   id: "x-axis-1",
      ticks: {
        beginAtZero: true,
        backdropPaddingX: 50
      },          
    },
    // {
    //   stacked: false,
    //   display: true,
    //   barThickness: 10,
    // //  id: "x-axis-1",
    //   ticks: {
    //     beginAtZero: true
    //   },          
    // }

  ],


    yAxes: [{
     stacked: true,
      id: "y-axis-1",
      barThickness: 40,
    },

    {
     stacked: true,
     barThickness: 80,
     offset: true, 
     id: "y-axis-2",
     ticks: {
      beginAtZero: true,
      backdropPaddingX: 50
    },    
    },

    {
      stacked: true,
      barThickness: 20,
      height: 19,width:20,
       id: "y-axis-3",

     }
  ]

  }
};

Angular Chartjs插件更改条形图的宽度和高度

0 个答案: