问题：

图表中的堆叠混合水平条形图。Js轴定位

马天逸

2023-03-14

我试图在3.2.0中创建一个混合堆叠的水平条形图和折线图Charts.js。

预期行为：一个轴在底部的堆叠条，包括轴标题和一个轴在顶部的折线图。

实际行为：底部的所有轴都显示了一个额外的轴，该轴似乎与任何数据集都不对应。不显示轴标题。

注意:代码中有几个条形的值为零，根据生成的数据，这些值可以是非零的。

我的代码：

<canvas id="myChart" width="400" height="400"></canvas>

<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {

    data: {
      labels: ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", ],
      datasets: [{
          type: "line",
          label: "Earnings",
          xAxisID: "A1",
          data: [10000, 20000, 30000, 5000]
        },

        {
          label: "CAT 1",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(255,59,59, 0.2)"],
          borderColor: ["rgba(255,59,59, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 2",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(241,85,54, 0.2)"],
          borderColor: ["rgba(241,85,54, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 3",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(235,106,55, 0.2)"],
          borderColor: ["rgba(235,106,55, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 4",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(227,131,53, 0.2)"],
          borderColor: ["rgba(227,131,53, 1)"],
          borderWidth: 1,
          data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
        },

        {
          label: "CAT 5",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(221,171,54, 0.2)"],
          borderColor: ["rgba(221,171,54, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 6",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(218,199,52, 0.2)"],
          borderColor: ["rgba(218,199,52, 1)"],
          borderWidth: 1,
          data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
        },

        {
          label: "CAT 7",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(192,224,66, 0.2)"],
          borderColor: ["rgba(192,224,66, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 14.921666666667, 0, 0, ]
        },

        {
          label: "CAT 8",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(124,236,93, 0.2)"],
          borderColor: ["rgba(124,236,93, 1)"],
          borderWidth: 1,
          data: [40.216666666667, 0, 0, 0, 0, 0, ]
        },



      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      indexAxis: "y",
      scales: {
        x: [

          {
            display: true,
            position: "top",
            type: "linear",
            title: {
              text: "cost",
              display: true,
            },
            beginAtZero: true,
            id: "A1",


          },
          {
            id: "B1",
            position: "bottom",
            title: {
              text: "hours",
              display: false,
            },
            beginAtZero: true

          }
        ],

        y: {
          display: true,
          stacked: true,
          //beginAtZero: true
        }
      }
    }
  });

</script>

jsfiddle

当前行为的屏幕截图

共有1个答案

瞿和硕

2023-03-14

在v3中，x轴和y轴不再是数组，所有的刻度都是一个对象，您可以用< code>position参数定义位置，也不需要在对象中指定id，但是对象键是id

例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {

    data: {
      labels: ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", ],
      datasets: [{
          type: "line",
          label: "Earnings",
          xAxisID: "A1",
          data: [10000, 20000, 30000, 5000]
        },

        {
          label: "CAT 1",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(255,59,59, 0.2)"],
          borderColor: ["rgba(255,59,59, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 2",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(241,85,54, 0.2)"],
          borderColor: ["rgba(241,85,54, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 3",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(235,106,55, 0.2)"],
          borderColor: ["rgba(235,106,55, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 4",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(227,131,53, 0.2)"],
          borderColor: ["rgba(227,131,53, 1)"],
          borderWidth: 1,
          data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
        },

        {
          label: "CAT 5",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(221,171,54, 0.2)"],
          borderColor: ["rgba(221,171,54, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 6",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(218,199,52, 0.2)"],
          borderColor: ["rgba(218,199,52, 1)"],
          borderWidth: 1,
          data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
        },

        {
          label: "CAT 7",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(192,224,66, 0.2)"],
          borderColor: ["rgba(192,224,66, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 14.921666666667, 0, 0, ]
        },

        {
          label: "CAT 8",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(124,236,93, 0.2)"],
          borderColor: ["rgba(124,236,93, 1)"],
          borderWidth: 1,
          data: [40.216666666667, 0, 0, 0, 0, 0, ]
        },



      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      indexAxis: "y",
      scales: {
        A1:

        {
          display: true,
          position: "top",
          type: "linear",
          title: {
            text: "cost",
            display: true,
          },
          beginAtZero: true,
          id: "A1",


        },
        B1: {
          id: "B1",
          position: "bottom",
          title: {
            text: "hours",
            display: false,
          },
          beginAtZero: true

        },

        y: {
          display: true,
          stacked: true,
        }
      }
    }
  });
</script>

类似资料：

图表中的水平条形图.js

我正在尝试使用2.3.0绘制chart.js水平条形图- 但它只显示一个小节。我错过了什么？
具有两个Y轴问题的水平堆叠条形图

关于我的图表，我有以下问题/疑问： > 如何防止正确的 y 轴刻度值被部分删除或进入图表内部？当我使用yValuesTripId作为左和右y轴域的域时，图表绘制得很好。如何使用yAxisFirstStopTimes作为左y轴域值和yAxisLastStopTimes作为右y轴值使其绘制精细？您可以单击此处查看或编辑图表：代码如下：
Matplotlib中的水平堆积条形图

问题内容：我正在尝试使用创建水平堆叠的条形图，但是我看不到如何使条形实际堆叠，而不是全部从y轴开始。这是我的测试代码。看到tcaswell的评论后，编辑使用kwarg。这似乎是正确的方法，但是如果没有特定条形的数据，则尝试失败，因为它正尝试添加到随后返回的值。问题答案：由于您使用的是熊猫，因此值得一提的是，您可以在本地进行堆积条形图：请参阅文档的可视化部分。
d3js-水平轴上的堆叠条形图-我如何设置x以使条形分开？

目前我正在编写一个水平轴上的堆叠条形图的代码。但是我不知道如何设置.attr（x,...）来确保输入的每个rect都在条的末尾，从而填满空间。你能帮忙吗？
ChartJs堆叠条形图

我有以下不同月份的数据一月：[1,5,3] Feb：[10,5] 三月：[4,8] 四月：[7] 可能：[3,1,5,0,7] 我想生成如下所示的条形图现在，我有以下代码，我想知道如何生成如上图所示的条形图。 }); 非常感谢。
Highcharts 堆叠条形图

Highcharts 条形图以下实例演示了堆叠条形图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。配置 plotOptions 配置图表堆叠使用 plotOptions.series.stacking，并设置为 "normal"。如果禁用堆叠可设置为 null ， "normal" 通过值设置堆叠， "percent" 堆叠则按百分比。 v

图表中的堆叠混合水平条形图。Js轴定位

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档