Chartjs气泡图中的Y轴上的类别比例和X轴上的时间
jas*_*nry 5 chart.js chart.js2
气泡图中的y轴上是否可以具有类别比例？我正在尝试创建一个气泡图，其中以“ hh：mm a”格式在y轴->星期几和x轴->时间上。（仅因为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块）
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 认可的刻度类型。将类型重命名为其小写伙伴 ，category使其能够被 ChartJS 识别。勾选选项设置不正确，并且属性名称也是无效的，这会导致 ChartJS 无法运行。
文档说刻度值tick.min 和tick.max 必须位于Labels 数组中。
截至目前，ticks.min和ticks.max对于类别量表来说是可选的。但是，如果您想继续使用ticks.minand ticks.max，您可以这样做：
改变
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
到
ticks: {
min: "Mon",
max: "Thu"
}
尽管它不像官方文档中那样清晰，但这就是指定选项ticks.min和时的含义 -我们现在可以访问我们的设置，ticks.max而不是以前的。ticks.ticks.minticks.min
- 为轴设置的标签
category当前影响所有轴，而不仅仅是 y（类别）轴。我们可以通过设置yLabels而不是解决此问题labels，如文档中所示。
改变
labels: ["Mon", "Tue", "wed", "Thu"],
到
yLabels: ["Mon", "Tue", "wed", "Thu"],
- 将 x 轴和 y 轴都放在底部会产生乱码图表。这可以通过将 y 轴移回左侧来解决。
改变
type: 'category',
position: 'bottom',
ticks: {
到
type: 'category',
position: 'left',
ticks: {
现在看起来像这样：
我们现在有了一个可用的气泡图！y 轴显示星期几，x 轴显示格式为“hh:mm a”的时间值。这是完成的示例代码笔：http://codepen.io/albinodrought/pen/VmNwoj
为了回应这种绘图方式的推理，
（只是因为 Chart.js 只允许在 x 轴上设置时间刻度）
似乎还有在 y 轴上绘制时间刻度值的解决方法：ChartJS issues #2791
主要是将数据点的 y 值设置为时间格式值（纪元），然后更改 y 轴的回调以格式化这些值。请参阅ChartJS 文档以设置刻度回调。