个人中心
gpt4 book ai didi

chart.js - Chartjs 气泡图中 Y 轴上的类别刻度和 x 轴上的时间

转载 作者：行者123 更新时间：2023-12-03 06:38:16 25 4
gpt4 key购买 nike

气泡图中的 y 轴是否可以有类别刻度？我正在尝试创建一个气泡图，其中 y 轴 -> 一周中的天数和 x 轴 -> 时间采用“hh:mm a”格式。 (只是因为 Chart.js 只允许在 x 轴上设置时间刻度)。请建议我如何更改此问题，以便对更多人更有帮助。

<body><canvas id="bubble" width="400" height="400"></canvas></body>

<script>


$(function() {
  Chart.defaults.global.defaultFontColor = '#fff'
  var bubbleBackgroundColor = function() {
            return 'rgba(255, 206, 86, 0.2)'
  };
  var bubbleBorderColor = function() {
            return 'rgba(255, 206, 86, 1)'
  };

  var bubbleChartData = {
    animation: {
      duration: 10000
    },
    // Documentation says the tick values tick.min & tick.max must be in the Labels array. So thats what I have below
    labels: ["Mon", "Tue", "wed", "Thu"],
    datasets: [{
      label: "Requests and bookings",
      fill: false,
      lineTension: 0.1,
      backgroundColor: bubbleBackgroundColor(),
      borderColor: bubbleBorderColor(),
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(153, 102, 155, 0.2)",
      pointHoverBorderColor: "rgba(153, 102, 155, 1)",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      // how would the data change ...how can the numbers for y be replaced with strings
      data:[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}]
    }]
  };


  var ctx = document.getElementById('bubble');
  var bubble = new Chart(ctx, {
    type: 'bubble',
    data: bubbleChartData,
    options: {
      responsive: true,
      title: {
        display: true,
        text:'Weekly activity'
      },
      options: {
        scales: {
          yAxes: [{
              // will this create y-axis with days of week?
              type: 'Category',
              position: 'bottom',
              ticks: {
                ticks.min: "Mon",
                ticks.max: "Thu"
              }
          }],
          xAxes: [{
              type: 'time',
              time: {
                  displayFormats: {
                      minute: 'hh:mm a'
                  }
              }
          }]
        }
      }
    }
  });
});
</script>

最佳答案

这在 ChartJS 中是可能的，一旦修复了几个问题，就可以使用给定的代码:

  1. 包含比例的选项配置位于另一个选项对象中。这意味着第二层中的选项将不会生效。

改变这个

options: {
  responsive: true,
  title: {
    display: true,
    text:'Weekly activity'
  },
  options: {
    scales: {
      yAxes: [{
          // will this create y-axis with days of week?
          type: 'Category',
          position: 'bottom',
          ticks: {
            ticks.min: "Mon",
            ticks.max: "Thu"
          }
      }],
      xAxes: [{
          type: 'time',
          time: {
              displayFormats: {
                  minute: 'hh:mm a'
              }
          }
      }]
    }
  }
}

为此(通过删除多余的 options block )

options: {
  responsive: true,
  title: {
  display: true,
  text:'Weekly activity'
  },
  scales: {
    yAxes: [{
        // will this create y-axis with days of week?
        type: 'Category',
        position: 'bottom',
        ticks: {
          ticks.min: "Mon",
          ticks.max: "Thu"
        }
    }],
    xAxes: [{
        type: 'time',
        time: {
            displayFormats: {
                minute: 'hh:mm a'
            }
        }
    }]
  }
}

解决了这个问题。

  • x 轴的刻度类型为 Category，无法识别 ChartJS scale type只是因为大写字母。将类型重命名为其小写伙伴 category，使其能够被 ChartJS 识别。

  • 勾选选项设置不正确，而且属性名称无效，这会导致 ChartJS 无法运行。

    • Documentation says the tick values tick.min & tick.max must be in the Labels array.

    到目前为止，ticks.min 和 ticks.max 对于类别尺度来说是可选的。但是，如果您想继续使用 ticks.min 和 ticks.max，您可以这样做:

    改变

    ticks: {
      ticks.min: "Mon",
      ticks.max: "Thu"
    }

    至

    ticks: {
      min: "Mon",
      max: "Thu"
    }

    虽然没有官方文档中那样清楚，但这就是指定选项 ticks.min 和 ticks.max 时的含义- 我们现在可以通过 ticks.min 访问我们的设置，而不是之前的 ticks.ticks.min。

  • 为类别轴设置的标签当前影响所有轴，而不仅仅是 y(类别)轴。我们可以通过设置yLabels而不是labels来解决这个问题，如 shown in the documentation .

    • 改变

    labels: ["Mon", "Tue", "wed", "Thu"],

    至

    yLabels: ["Mon", "Tue", "wed", "Thu"],
  • 将 x 轴和 y 轴都放在底部会产生乱码图表。这可以通过将 y 轴移回左侧来解决。

    • 改变

    type: 'category',
    position: 'bottom',
    ticks: {

    至

    type: 'category',
    position: 'left',
    ticks: {

    现在看起来像这样:

    Picture of the codepen sample

    我们现在有了一个可用的气泡图! y 轴显示星期几，x 轴显示格式为“hh:mm a”的时间值。这是完成的代码笔示例:http://codepen.io/albinodrought/pen/VmNwoj

    <小时/>

    针对这种图表方式的推理，

    (only because Chart.js allows timescale only on the x axis)

    似乎还有在 y 轴上绘制时间刻度值的解决方法:ChartJS issue #2791

    主要是将数据点的 y 值设置为时间格式值(纪元)，然后更改 y 轴的回调以格式化这些值。请参阅ChartJS docs for setting tick callbacks .

    关于chart.js - Chartjs 气泡图中 Y 轴上的类别刻度和 x 轴上的时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38181412/

    25 4 0
    文章推荐： architecture - 如何使用CMake检测目标架构？
    文章推荐： javascript - 如何正确地将数据从 jQuery 和 Ajax 附加到 HTML？
    文章推荐： javascript - 使用 Javascript 附加事件
    文章推荐： chart.js - Chartjs - 具有多级 x 轴的条形图的数据格式
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com