Метка оси X canvasjs показывает индекс оси Y в комбинированном графике - PullRequest
Новая
       129

Метка оси X canvasjs показывает индекс оси Y в комбинированном графике

0 голосов
/ 11 февраля 2019

Я использую комбинированный тип диаграммы Canvasjs для отображения значения по 2 осям Y против одного значения по оси X (времени).Но, как вы можете видеть на изображении, метка оси X показывает метку индекса оси Y в конкретном случае.

enter image description here

Если вы видите, вместо 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>

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Я неправильно понял понятие «этикетка».Чтобы показать правильное содержание всплывающей подсказки, я использовал 'label', но его использование отличается.Я использовал имя, чтобы показать правильное содержание всплывающей подсказки.Это не создает никаких проблем, и я надеюсь, что это будет правильным вариантом.

Для справки, я добавил свой код во фрагмент.

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>
0 голосов
/ 11 февраля 2019

Siddiq,

Это не indexLabel, отображаемая над axisX, а метка, установленная в 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>

`

...