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

我已经有一个使用chartJS的图形,如下所示

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

,其代码为:

r_chart_data = [[-0.001,2.052],[-2.385,2.052]];
dr_chart_data = [[-0.01,1.83],[1.05,2.83],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,2.052]],2.052]];

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

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

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

anothermimi 回答:使用ChartJS绘制带孔的远程水平条形图

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2537822.html

大家都在问