条形图的一些条形图从Chart.js中消失了

Nesbox314

我正在尝试使用Chart.js制作图表,正在制作条形图,仅通过添加一些数据,其中一些条形便消失了。我意识到,当我在日期字段中输入相等的值时,就会发生这种情况。有人能帮我吗?请?

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Janeiro", "Fevereiro", "Março", "Abril"],
      datasets: [
          {
              label: "Indicados",
              yAxisID: 'yAxis1',
              backgroundColor: "#56D9FE",
              data: [5,3,3,4]
          },
          {
              label: "Instalados",
              yAxisID: 'yAxis1',
              backgroundColor: "#5FE3A1",
              data: [3,4,6,4]
          },
          {
              label: "Vendas",
              yAxisID: 'yAxis2',
              backgroundColor: "#A3A0FB",
              data: [50, 45, 80, 60]
          },
          {
              label: "Bônus",
              yAxisID: 'yAxis2',
              backgroundColor: "#FEC163",
              data: [30, 10, 25, 35],
          }
      ]
    },
    options: {
      responsive: true, //responsividade
      maintainAspectRatio: true,
      lineWidth: 0.1,
      aspectRatio: 3, //tamanho
      legend: {
        display: true,
        position: 'bottom' // Posição das legendas
      },
      scales: {
          yAxes: [
              {
                  id: 'yAxis1',
                  position: 'left'
              },
              {
                  id: 'yAxis2',
                  position: 'right'
              }
          ]
      }
    }

  });

这是越野车的图表

外星人

您无需为数据集指定yAxis(如果只有2个数据集,这将是您做的好方法),无论如何,它都会存在,如果您要创建垂直图表,则会向yAxis添加数据,在这种情况下只会覆盖您的数据。取出yAxisID: 'yAxis1'yAxisID: 'yAxis2'从数据集。会的

您需要的是:

   ticks: {
       max: 80,
       min: 0
   }

将此添加到您的yAxis conf中,它将类似于:

scales: {
      yAxes: [
          {
              id: 'yAxis1',
              position: 'left',
              ticks: {
                  max: 80,
                  min: 0
              }
          },
          {
              id: 'yAxis2',
              position: 'right',
              ticks: {
                  max: 80,
                  min: 0
              }
          }
      ]
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档