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,
      }]
    }
  }
});```

chartjs将点添加到分组条形图中的条形

1 个答案: