Chart.js 在chartjs中绘制混合堆叠水平条/线

我已经看过了chartjs的文档/示例，但是有人知道下面的方法吗

• 创建宽度（x轴）可变但高度始终为全（即整个y轴）的条形图
• 图表中可以有x个条形图
• 创建一条横穿x轴的直线，但可以更改其y轴（即不是直线，而是曲线）

我这里有一张粗糙的画，黄色是条线，黑色是线

我使用堆叠的条和交换的轴，有点让第一部分下来，但y轴（条的高度）只设置为1。当尝试在混合模式下绘制曲线时，这是一个问题，因为只有一个y轴点（而不是多个y轴点）：

下面是另一个尝试，它有多个y轴点，但我无法控制条的宽度：

如果有人能帮上忙（或者至少告诉我我的方向是否正确），我将不胜感激

Please see code in the jsfiddle link

---

嗯，那很难。。。我唯一的解决方案是创建一个包含很多非常小的条形图

但是它远远不是完美的，但是在chart.js中实现它的唯一方法。我没有测试性能，因为我不知道您的数据，但这将是非常重要和最大的问题

目前只有一个矩形是可能的，但将其改进为多个矩形并不困难

以下是我的所有代码，与JSBin相同：

var chartData = {
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'blue',
    borderWidth: 2,
    fill: false,
    data: []
  }, {
    type: 'bar',
    label: 'Dataset 2',
    backgroundColor: 'red',
    data: [],
  }]
};

var newData0 = []
var newData1 = []
var labels = []
var counter = 50

// Rectangle between two random Integers
var rectangleBetween = [Math.round(Math.random()*counter), Math.round(Math.random()*counter)]
rectangleBetween.sort(function(a, b){return a - b})

for (var i = 0; i < counter; i++) {
  labels.push(i)

  // Data for Dataset 1 (line):
  var newObj0 = {}
  newObj0.x = i
  // 50/50 chance of data
  if (Math.random()<0.5) {
    newObj0.y = Math.round(Math.random()*100)
  } else {
    newObj0.y = null
  }
  newData0.push(newObj0)

  // Data for Dataset 2 (bar):
  var newObj1 = {}
  if (i >= rectangleBetween[0] && i <= rectangleBetween[1]) {
    newObj1.x = i
    newObj1.y = 100
  } else {
    newObj1.x = i
    newObj1.y = 0
  }  
  newData1.push(newObj1)
}

chartData.datasets[0].data = newData0
chartData.datasets[1].data = newData1
chartData.labels = labels


var ctx = document.getElementById('chart').getContext('2d');
myMixedChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    responsive: true,
    spanGaps: true,
    title: {
      display: true,
      text: 'Chart.js Combo Bar Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        //barThickness: 80, // number (pixels) or 'flex'
        //maxBarThickness: 100, // number (pixels)
        barPercentage: 1.0,
        categoryPercentage: 1.0,
        gridLines: {
          display: false
        }
      }]
    }
  }
});

var chartData={
数据集：[{
键入：“行”，
标签：“数据集1”，
边框颜色：“蓝色”，
边界宽度：2，
填充：假，
数据：[]
}, {
类型：'bar'，
标签：“数据集2”，
背景颜色：“红色”，
数据：[]，
}]
};
var newData0=[]
var newData1=[]
变量标签=[]
变量计数器=50
//两个随机整数之间的矩形
var rectangleBetween=[Math.round（Math.random（）*计数器），Math.round（Math.random（）*计数器）]
sort（函数（a，b）{返回a-b}）
对于（变量i=0；i如果（Math.random（）=rectangleBetween[0]&&iHmh，这很难……我唯一的解决方案是创建一个包含很多非常小的条形图

但是它远远不是完美的，但是在chart.js中实现它的唯一方法。我没有测试性能，因为我不知道您的数据，但这将是非常重要的，也是最大的问题

目前只有一个矩形是可能的，但将其改进为多个矩形并不困难

以下是我的所有代码，与JSBin相同：

var chartData = {
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'blue',
    borderWidth: 2,
    fill: false,
    data: []
  }, {
    type: 'bar',
    label: 'Dataset 2',
    backgroundColor: 'red',
    data: [],
  }]
};

var newData0 = []
var newData1 = []
var labels = []
var counter = 50

// Rectangle between two random Integers
var rectangleBetween = [Math.round(Math.random()*counter), Math.round(Math.random()*counter)]
rectangleBetween.sort(function(a, b){return a - b})

for (var i = 0; i < counter; i++) {
  labels.push(i)

  // Data for Dataset 1 (line):
  var newObj0 = {}
  newObj0.x = i
  // 50/50 chance of data
  if (Math.random()<0.5) {
    newObj0.y = Math.round(Math.random()*100)
  } else {
    newObj0.y = null
  }
  newData0.push(newObj0)

  // Data for Dataset 2 (bar):
  var newObj1 = {}
  if (i >= rectangleBetween[0] && i <= rectangleBetween[1]) {
    newObj1.x = i
    newObj1.y = 100
  } else {
    newObj1.x = i
    newObj1.y = 0
  }  
  newData1.push(newObj1)
}

chartData.datasets[0].data = newData0
chartData.datasets[1].data = newData1
chartData.labels = labels


var ctx = document.getElementById('chart').getContext('2d');
myMixedChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    responsive: true,
    spanGaps: true,
    title: {
      display: true,
      text: 'Chart.js Combo Bar Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        //barThickness: 80, // number (pixels) or 'flex'
        //maxBarThickness: 100, // number (pixels)
        barPercentage: 1.0,
        categoryPercentage: 1.0,
        gridLines: {
          display: false
        }
      }]
    }
  }
});

var chartData={
数据集：[{
键入：“行”，
标签：“数据集1”，
边框颜色：“蓝色”，
边界宽度：2，
填充：假，
数据：[]
}, {
类型：'bar'，
标签：“数据集2”，
背景颜色：“红色”，
数据：[]，
}]
};
var newData0=[]
var newData1=[]
变量标签=[]
变量计数器=50
//两个随机整数之间的矩形
var rectangleBetween=[Math.round（Math.random（）*计数器），Math.round（Math.random（）*计数器）]
sort（函数（a，b）{返回a-b}）
对于（变量i=0；i如果（Math.random（）=rectangleBetween[0]&&i，看起来这是最好的解决方案：


这要归功于代码的原始作者（Jukka Kurkela aka kurkle）。他在上回答了这个问题。
看起来这是最好的解决方案：


这段代码的原始作者（Jukka Kurkela aka kurkle）对此表示感谢。他在上回答了这个问题。
这是重复的不，这不是重复的。这是一个特殊的案例，没有在其他地方解决，没有在其他地方解决。这是一个特殊的案例，没有在其他地方解决。我的线实际上是一个散点图（showLines=true）大约有2000个点，平均可以有0-50个条。我以您为例，制作了一个小的静态示例。条之间似乎有间隙。我不确定如何闭合这些间隙。我还想在整个条形状周围放置一个边框（而不是在条的每个单独切片上的边框）。我还希望对整个条形状（而不是条的每个单独切片）有一些不透明度.这是我的编辑：以你的例子来说，这可能吗？好的，我想我放弃了。我找不到一种方法来显示彼此后面的栏，当在同一个索引上时，它总是将它们显示在彼此旁边。因此，只有一个矩形是可能的。这也是栏之间存在间隙的原因。我不认为每个数据都可能有边框。很抱歉，我无法帮助您，我不知道其他解决方案。我也不知道，但感谢您对此进行研究！如果无法完成，我将发布一个功能请求。我的线条实际上是散点图（showLines=true）大约有2000个点，平均可以有0-50个条。我以你为例，做了一个小的静态示例。条之间似乎有间隙。我不确定如何缩小这些间隙。我还想在整个条形状周围放置一个边框（而不是条的每个单独部分上的边框）。我还希望对整个条形图形状有一些不透明度（而不是在条形图的每个单独切片上）.这是我的编辑：以你的例子来说，这可能吗？好的，我想我放弃了。我找不到一种方法来显示彼此后面的栏，当在同一个索引上时，它总是将它们显示在彼此旁边。因此，只有一个矩形是可能的。这也是栏之间存在间隙的原因。我不认为每个数据都可能有边框。很抱歉，我无法帮助您，我不知道其他解决方案。我也不知道，但感谢您研究它！如果需要，我将发布一个功能请求