chart.js – Chart轴中气泡图中Y轴上的类别比例和x轴上的时间

泡泡图中是否可以在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中是可能的,并且一旦修复了几个问题,它将与给定的代码一起使用:

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

改变这一点

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: {
  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.将类型重命名为其小写伙伴类别,允许ChartJS识别它.
> tick选项设置不正确,也是无效的属性名称,这会阻止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.ticks.min,我们现在可以访问我们的ticks.min的设置.

>为类别轴设置的标签当前影响所有轴,而不仅影响y(类别)轴.我们可以通过设置yLabel而不是标签来解决这个问题,如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 – Chart轴中气泡图中Y轴上的类别比例和x轴上的时间 - 代码日志