Question

气泡图中是否可以在y轴上设置类别比例？我正在尝试创建一个气泡图，其中y轴 - ＆gt;星期几和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>

Answer 1

这在ChartJS中是可行的，并且一旦修复了几个问题，它将与给定的代码一起使用：

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

更改此

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块）

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运行。

文档说滴答值tick.min＆amp; tick.max必须在Labels数组中。

截至目前，ticks.min和ticks.max对于类别比例是可选的。但是，如果您想继续使用ticks.min和ticks.max，则可以执行此操作：

更改

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

到

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

虽然它没有在官方文档中那么明确，但这是指定选项ticks.min和ticks.max时的意思 - 而不是之前的{{1} }，我们现在可以在ticks.ticks.min访问我们的设置。

为ticks.min轴设置的标签当前影响所有轴，而不仅影响y（类别）轴。我们可以通过设置category代替yLabels，shown in the documentation来解决此问题。

更改

labels

到

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

在底部同时显示x和y轴会产生乱码图。这可以通过将y轴向左移动来解决。

更改

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

到

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

现在看起来像这样：

我们现在有一张工作气泡图！ y轴显示星期几，x轴显示格式为＆＃39; hh：mm a＆＃39;的时间值。以下是完成的代码示例：http://codepen.io/albinodrought/pen/VmNwoj

为了回应这种绘图方式的推理，

（仅因为Chart.js仅在x轴上允许时间刻度）

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

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

Answer 2

请尝试数据：

[ {x: '2016-05-11 12:00:00', y: 'Mon', r: 15}, {x: '2016-05-11 20:00:00', y: 'Sat', r: 20}, {x: '2016-05-11 05:00:00', y: 'Wed', r: 5} ]

而不是数据：

[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}]

Chartjs中气泡图中Y轴上的类别比例和x轴上的时间

2 个答案: