Question

我正在使用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>

Answer 1

Siddiq，

不是在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>

`

Answer 2

我误解了“标签”的概念。为了显示正确的工具提示内容，我使用了“标签”，但是用法不同。我现在使用“名称”显示正确的工具提示内容。这不会造成任何麻烦，我希望这将是正确的选择。

作为参考，我在这里的代码段中添加了我的代码。

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, 10), y: 2, name: 'Work' },
	{ x: new Date(2018, 10, 18, 11, 10), y: 1, name: 'Rest' }
];
window.onload = function () {
			//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
		},
		{
			type: "stepLine",
			toolTipContent: '{name}',
			dataPoints: workrest_datapoints
		}
		
	]
});

chart.render();
}

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

canvas.js x轴标签在组合图中显示y轴索引

2 个答案: