图表js - 渲染后获取条形宽度

Question

我需要以像素为单位获取条形宽度，并在重叠折线图的pointRadius: {{barwidth}}的图表js设置中使用它。我的图表也设置为响应，所以如果要调整窗口大小，我需要更新此值。

我很难过。并且可以真正使用一些帮助。

查看每个栏上的行

这是一个设置pointStyle: 'line'的折线图，所以我可以产生这种效果。现在我需要使用pointRadius: {{barwidth}}

将该行的宽度设置为条形

Answer 1

通常，您可以使用图表的getDatasetMeta()方法获取条形宽度。

但是，如果要动态更改/更新折线图的点半径（在窗口调整大小时），则必须使用图表插件，如下所示：

Chart.plugins.register({
   updated: false,
   beforeDraw: function(chart) {
      var barWidth = chart.getDatasetMeta(1).data[0]._model.width;
      var line = chart.data.datasets[0];
      line.pointRadius = barWidth / 2;
      line.pointHoverRadius = barWidth / 2;
      if (!this.updated) {
         chart.update();
         this.updated = true;
      }
   }
});

^{*在脚本开头添加}

ᴅᴇᴍᴏ⧩

＆＃13;

＆＃13;

Chart.plugins.register({
   updated: false,
   beforeDraw: function(chart) {
      var barWidth = chart.getDatasetMeta(1 /* dataset-index of bar graph */).data[0]._model.width;
      var line = chart.data.datasets[0 /* dataset-index of line graph */];
      line.pointRadius = barWidth / 2;
      line.pointHoverRadius = barWidth / 2;
      // update chart at first render with newly added values
      if (!this.updated) {
         chart.update();
         this.updated = true;
      }
   }
});

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         type: 'line',
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.5)',
         borderColor: 'transparent',
         pointBorderColor: '#07C',
         fill: false,
         pointStyle: 'line'
      }, {
         label: 'BAR',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(4, 142, 128, 0.5)'
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

＆＃13;

＆＃13;

＆＃13;