chartjs 在分组条形图中向条形添加点

Question

使用 chart.js，我对条形图进行了分组。

我已经对具有某些动态值的条形图进行了分组，但我也对这些值有期望。所以我想在分组条形图中添加一个期望指标。

基本上，这是一个更简单的版本：

除了点之外，它还可以是一条线或其他东西。

我现在有一个组条形图，其中一些点与相应的条具有相同的堆叠，但这些点没有连接到条。如何解决这个问题？

var data = {
  labels: ["January", "February", "March"],
      datasets: [
        {
          label: "Apples",
          type: "scatter",
          fill: false,
          showLine: false,
          backgroundColor: "rgba(99,255,132,0.2)",
          data: [40, 20, 20],
          stack: 'Stack 1'
        },
        {
          label: "Cookies",
          backgroundColor: "rgba(255,99,132,0.2)",
          data: [60, 20, 20],
          stack: 'Stack 1'
        },
        {
          label: "Apples",          
          type: "scatter",
          fill: false,
          showLine: false,
          backgroundColor: "rgba(99,255,132,0.2)",
          data: [30, 30, 10],
          stack: 'Stack 2'
        },
        {
          label: "Cookies",
          backgroundColor: "rgba(255,99,132,0.2)",
          data: [60, 20, 20],
          stack: 'Stack 2'
        },
        {
          label: "Apples",          
          type: "scatter",
          fill: false,
          showLine: false,
          backgroundColor: "rgba(99,255,132,0.2)",
          data: [20, 10, 30],
          stack: 'Stack 3'
        },
        {
          label: "Cookies",
          backgroundColor: "rgba(255,99,132,0.2)",
          data: [60, 20, 20],
          stack: 'Stack 3'
        },
      ]
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        //stacked: true,
      }],
      yAxes: [{
        ticks: {
          max: 160,
        },
        stacked: true,
      }]
    }
  }
});

这是我的小提琴：http://jsfiddle.net/CorneelDragon/kd9xqnc1/23/

Answer 1

我一直想做同样的事情。最后我使用了一个带有自己的 x 轴的散点图，最大值是根据堆栈和组的数量计算的。

这是一个使用散点图绘制点的更新小提琴。您可以轻松隐藏额外的 x 轴。

http://jsfiddle.net/bpcLs7uz/

var data = {
  labels: ["January", "February", "March"],
            datasets: [
              {
                label: "Cookies",
                backgroundColor: "rgba(255,99,132,0.2)",
                data: [60, 20, 20],
                stack: 'Stack 1'
              },
              {
                label: "Cookies",
                backgroundColor: "rgba(255,99,132,0.2)",
                data: [60, 20, 20],
                stack: 'Stack 2'
              },
              {
                label: "Cookies",
                backgroundColor: "rgba(255,99,132,0.2)",
                data: [60, 20, 20],
                stack: 'Stack 3'
              },
              {
                label: "Scatter 1",          
                type: "scatter",
                fill: false,
                showLine: false,
                backgroundColor: "rgba(99,255,132,0.2)",
                data: [{y:30, x:1}, {y:30, x:5}, {y:10, x:9}],
                xAxisID: 'x-axis-2'
              },
              {
                label: "Scatter 2",          
                type: "scatter",
                fill: false,
                showLine: false,
                backgroundColor: "rgba(99,255,132,0.2)",
                data: [{y:24, x:2}, {y:10, x:6}, {y:15, x:10}],
                xAxisID: 'x-axis-2',
                showLine: true
              },
              {
                label: "Scatter 3",
                type: "scatter",
                fill: false,
                showLine: false,
                backgroundColor: "rgba(99,255,132,0.2)",
                data: [{y:50, x:3}, {y:9, x:7}, {y:60, x:11}],
                xAxisID: 'x-axis-2'
              }
            ]
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        display: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 12,
          stepSize: 1
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          max: 160,
        },
        stacked: true,
      }]
    }
  }
});```