我正在使用 Canvasjs 组合图表类型来显示 2 个 y 轴值与单个 x 轴值(时间)。但正如您在图像中看到的，在特定情况下，x 轴标签显示 y 轴的索引标签。
如果您看到，图表中显示的是“黄金海岸”，而不是上午 10:00。
我尝试设置 x 轴的间隔，如下所示，但对我没有任何作用。
axisX: {
//interval: 1,
intervalType: "hour",
//valueFormatString: "DD MMM YYYY HH:mm:ss"
},
可能是什么问题以及如何解决这个问题？
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var location_datapoints = [
{ x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical", label: "Gold Coast" },
{ x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical", label: "Gold Coast" }
];
var workrest_datapoints = [
{ x: new Date(2018, 10, 18, 10, 0), y: 2, label: "Work" },
{ x: new Date(2018, 10, 18, 11, 0), y: 1, label: "Rest" }
];
//console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "Driver Work Rest Data"
},
axisY:{
title: "Work or Rest",
includeZero: false,
interval: 1,
labelFormatter: function ( e ) {
var ret;
switch(e.value){
case 1:
ret = "Rest";
break;
case 2:
ret = "Work";
break;
case 3:
ret = "2-up";
break;
case 4:
ret = "Location";
break;
case 5:
ret = "Comments";
break;
case 6:
ret = "Annotations"
break;
default:
ret = '';
}
return ret;
}
},
axisX: {
//interval: 1,
intervalType: "hour",
//valueFormatString: "DD MMM YYYY HH:mm:ss"
},
data: [
{
type: "bubble",
//toolTipContent: "{label}",
dataPoints: location_datapoints
},
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>最佳答案
西迪克，
这不是在 axisX 上显示的 indexLabel，而是在 dataPoint 中设置的标签。在这种情况下，删除标签应该可以正常工作。
var location_datapoints = [
{ x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical" },
{ x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical" }
];
var workrest_datapoints = [
{ x: new Date(2018, 10, 18, 10, 0), y: 2, label: "Work" },
{ x: new Date(2018, 10, 18, 11, 0), y: 1, label: "Rest" }
];
//console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "Driver Work Rest Data"
},
axisY:{
title: "Work or Rest",
includeZero: false,
interval: 1,
labelFormatter: function ( e ) {
var ret;
switch(e.value){
case 1:
ret = "Rest";
break;
case 2:
ret = "Work";
break;
case 3:
ret = "2-up";
break;
case 4:
ret = "Location";
break;
case 5:
ret = "Comments";
break;
case 6:
ret = "Annotations"
break;
default:
ret = '';
}
return ret;
}
},
axisX: {
//interval: 1,
intervalType: "hour",
//valueFormatString: "DD MMM YYYY HH:mm:ss"
},
data: [
{
type: "bubble",
//toolTipContent: "{label}",
dataPoints: location_datapoints
},
]
});
chart.render();<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>`
关于javascript - canvasjs x 轴标签显示组合图表中的 y 轴索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54623897/