使用ChartJS绘制带孔的远程水平条形图

Question

我已经有一个使用chartJS的图形，如下所示，其代码为：

r_chart_data = [[-0.001, 2.052],[-2.385, 2.052]];
dr_chart_data = [[-0.01, 1.83],[1.05, 2.83],[1.05, 2.83]];
myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: label,
    datasets: [{
      label : 'DataSet1',
      data: r_chart_data,
      backgroundColor: 'rgb(255, 99, 132)'
    },
    {
      label : 'DataSet2',
      data: dr_chart_data,
      backgroundColor: 'lightblue'
    }
    ]
  },
  options: {
  lineAtIndex : level,
    scales: {
      xAxes: [{
        ticks: {
          min: -5, 
          max: 5, 
          stepSize: 0.5,
        }
      }]
    }
  }
});

但是如果我的

r_chart_data[0] i.e. [-0.001,2.052]

不是连续范围，而是其值类似于

[[-0.001,1.023],[1.5,2.052]]

那我该如何绘制图形。修改后的r_chart_data：

r_chart_data = [[[-0.001,1.023],[1.5,2.052]],[-2.385, 2.052]];

类似地，如果我需要使用ChartJS以水平条形图的形式绘制一系列数据集。数据集的格式为：

dataset1: [[-10,-4],[-2,2],[4,6]] // should be plotted in a single bar graph
dataset2: [[-2,1],[1.5,3.5],[5.2,8.9]] //should be plotted in a second bar
dataset3: [[2,4],[5,7]] //third bar
.. and so on

此外，每个数据集不必具有三个范围项。它可以具有一个，两个或任意数量的范围项目。