如何在CanvasJS中仅显示第一个和最后一个标签

Question

我只需要在CanvasJS中显示第一个和最后一个标签。它始终显示所有标签，但我的要求是仅显示第一个和最后一个。有没有办法这样做？

Answer 1

您可以使用axisY labelFormatter来执行此操作。

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Chart showing only First and Last Axis Labels",
	},
	axisY: {
		tickColor: "transparent",
		labelFormatter: function(e){
			if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
				return e.value;
			return "";
		}
	},
	data: [{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}]
});

chart.render();

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

Answer 2

您还可以尝试隐藏所有轴标签，并以最小值和最大值添加stripLines。

＆＃13;

＆＃13;

var chart = new CanvasJS.Chart("chartContainer", {
title: {
	text: "Chart showing only First and Last Axis Labels",
},
axisX: {
	valueFormatString: "####"
},
axisY:[{
	tickColor: "transparent",
	labelFontColor: "transparent"
}],
axisY2:[{
	tickColor: "transparent",
	labelFontColor: "transparent"
}],
data: [
{
	type: "column",
	showInLegend: true,
	name: "Axis Y-1",
	xValueFormatString: "####",
	dataPoints: [
		{ x: 2006, y: 6 },
		{ x: 2007, y: 2 },
		{ x: 2008, y: 5 },
		{ x: 2009, y: 7 },
		{ x: 2010, y: 1 },
		{ x: 2011, y: 5 },
		{ x: 2012, y: 5 },
		{ x: 2013, y: 2 },
		{ x: 2014, y: 2 }
	]
},
{
	type: "column",
	showInLegend: true,                  
	axisYType: "secondary",
	//axisYIndex: 0, //Defaults to Zero
	name: "Axis Y2-1",
	xValueFormatString: "####",
	dataPoints: [
		{ x: 2006, y: 12 },
		{ x: 2007, y: 20 },
		{ x: 2008, y: 28 },
		{ x: 2009, y: 34 },
		{ x: 2010, y: 24 },
		{ x: 2011, y: 45 },
		{ x: 2012, y: 15 },
		{ x: 2013, y: 34 },
		{ x: 2014, y: 22 }
	]
}					
]
});

chart.render();
addStripLine(chart);

function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
	min = chart.axisY[i].get("minimum");      
	max = chart.axisY[i].get("maximum");
	chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
	chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
	min = chart.axisY2[i].get("minimum");
	max = chart.axisY2[i].get("maximum");
	chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
	chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;