canvasjs x轴标签显示在合并图的y轴指数

问题描述 投票：0回答：2

我使用Canvasjs组合图表类型用于示出针对单个x轴的值（时间）2 y轴值。但是，正如你可以在图片中看到，x轴标签显示在特定的情况下y轴的索引标识。

enter image description here

如果你看到的，而不是10:00 AM它显示在图表中的“黄金海岸”。

我试着设置为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>
javascript charts canvasjs
2个回答
1
投票

西迪克，

它没有被显示在axisX的indexLabel但是这在数据点设置标签。删除标签应该在这种情况下正常工作。

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>

`

1
投票

我误解了“标签”的概念。为了显示我用“标签”，但它的使用是不同的一个适当的提示内容。我用“名”现在显示正确的提示内容。这不作任何麻烦，我希望这将是正确的选择。

作为参考，我在这里的一个片段加入我的代码。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.