tickvals

tickvals

关注
发信
关注(28)粉丝(399)

javascript - 刻度显示为100μ而不是0.0001

我正在使用可绘图的JS创建图表。
一切都很好，接受滴答声和盘旋。
我有一系列数字，它们被密谋变成了其他东西。

例如：0.0001将显示为100μ
我真正想要的是将其显示为或0.0001或1/10000

我试图通过添加一个函数来更改tick格式（就像在d3中一样）
但似乎只接受一个可以解释的字符串。
更改tick格式还有其他方法吗？

我试图将tickvals设置为一个数组：[0.00001、0.0001、0.001、0.01、0.1]
但仍然会改变这一点。

帮助将不胜感激。



var request = {
	"request": "getFloodScenarios",
	"success": true,
	"response": {
		"options": {
			"dataRows": [{
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk-1629077822",
				"name_calculation": "C-kering_Veluwerandmeren_zuidelijk_Flevoland_nulderdijk",
				"probability": "0.0008",
				"conditional_factor": "1.00",
				"waterDepth": "0.3108",
				"exceedance": "0.0013824"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk919981487",
				"name_calculation": "Almere_Stormopzet",
				"probability": "0.000396",
				"conditional_factor": "0.80",
				"waterDepth": "2.67",
				"exceedance": "0.0005824"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk-498661755",
				"name_calculation": "Almere_Stormopzet",
				"probability": "7.425E-05",
				"conditional_factor": "0.15",
				"waterDepth": "2.73",
				"exceedance": "0.0001864"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk-1427412338",
				"name_calculation": "Almere_Stormopzet",
				"probability": "2.475E-05",
				"conditional_factor": "0.05",
				"waterDepth": "2.79",
				"exceedance": "0.00011215"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk2017462865",
				"name_calculation": "Almere_meerpeil",
				"probability": "6.952E-05",
				"conditional_factor": "0.80",
				"waterDepth": "3.08",
				"exceedance": "8.74E-05"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk2090682125",
				"name_calculation": "Almere_meerpeil",
				"probability": "1.738E-05",
				"conditional_factor": "0.20",
				"waterDepth": "3.17",
				"exceedance": "1.788E-05"
			}, {
				"dikering_nr": "999",
				"geoserver_layer": " LBEO:Maximale_waterdiepte_NL",
				"name_calculation": "Maximale_waterdiepte_NL",
				"probability": "5E-07",
				"conditional_factor": "1.00",
				"waterDepth": "3.9746999740600586",
				"exceedance": "5.00000000000002E-07"
			}],
			"dikeRing": "8",
			"minExceedance": "5.00000000000002E-07"
		},
		"message": "Scenarios gevonden",
		"token": "7cdd9b03-5c18-4ec2-86dc-c46327fbdde3",
		"step": "report"
	}
};

var newToFixed = function (nr) {

	var arr1 = ("" + nr).split("e"),
		 arr2 = [],
		 fixedPos = null;

	//notation is already normalized
	if (arr1.length === 1) {
		return nr;
	}

	/**
    * remove the + or - from the number
    * now have the exact number digits we want to use in toFixed
    */
	if (arr1[1].indexOf("+") === 0) {
		arr2 = arr1[1].split("+");
	} else {
		arr2 = arr1[1].split("-");
	}

	//making sure it is a number and not a string
	//fixedPos = Number(arr2[1]);
	return nr.toFixed(arr2[1]);

};

var createTickSet = function(minVal, maxVal) {

	var that = this,
		 minEx = parseFloat(Number(minVal).toPrecision()),
		 maxEx = parseFloat(Number(maxVal).toPrecision());

	if (minEx > maxEx) {
		minEx = parseFloat(Number(maxVal).toPrecision());
		maxEx = parseFloat(Number(minVal).toPrecision());
	}

	var min = Math.pow(10, Math.floor(Math.log10(minEx))),
		 max = Math.pow(10, Math.ceil(Math.log10(maxEx))),
		 tickMin = Math.floor(Math.log10(min)),
		 tickMax = Math.ceil(Math.log10(max)),
		 tickTotal = tickMax - tickMin,
		 tickSet = [];

	for (var a = 0; a <= tickTotal; a += 1) {
		tickSet.push(newToFixed(Math.pow(10, tickMin)));
		tickMin += 1;
	}

	return {
		"min": min,
		"max": max,
		"tickMin": tickMin,
		"tickMax": tickMax,
		"tickTotal": tickTotal,
		"tickSet": tickSet
	};
};

var dataRows = request.response.options.dataRows,
	 x = [],
    y = [],
	 maxExceedance = dataRows[0].exceedance,
    minExceedance = dataRows[dataRows.length - 1].exceedance,
	 tickData = createTickSet(minExceedance, maxExceedance),
	 tickSet = tickData.tickSet,
	 firstRow = $.extend(true, {}, dataRows[0]),
	 lastRow = $.extend(true, {}, dataRows[dataRows.length - 1]);

console.log(tickData);

if (firstRow.waterDepth > 0) {
	firstRow.waterDepth = 0;
	dataRows.unshift(firstRow);
}

lastRow.exceedance = tickSet[0];
dataRows.push(lastRow);

for (var i = 0; i < dataRows.length; i += 1) {
	for (keyName in dataRows[i]) {

		if (keyName == "waterDepth") {
			x.push(dataRows[i].waterDepth);
		}
		if (keyName == "exceedance") {
			y.push(dataRows[i].exceedance);
		}
	}
}

console.log(x);
console.log(y);

TESTER = document.getElementById('tester');

var line2015 = {
	x: x,
	y: y,
	name: '2015',
	line: {
		shape: 'hv',
		width: 3,
		color: '#1f77b4'
	},
	marker: {
		size: 8
	}
};

var line2015_2 = {
	x: x,
	y: y,
	hoverinfo: 'none',
	name: 'onzekerheid',
	line: {
		shape: 'hv',
	   width: 15,
		color: '#82bfe9'
	}
};


var line2050 = {
	x: x,
	y: y,
	name: '2050',
	line: {
		shape: 'vh',
		dash: 'dash',
		color: '#b45c1f',
		width: 3
	},
	marker: {
		size: 8
	}
};

var layout = {
      margin: { t: 15 },
		xaxis: {
			title: "Overstromingsdiepte in meter",
			tickmode: "linear"
		},
		yaxis: {
			title: "Kans per jaar",
			type: "log",
			tickvals: tickSet,
			dtick: 1,
			nticks: 10
		}
   };

Plotly.plot( TESTER, [line2015_2, line2015, line2050], layout);

/* Current Plotly.js version */
console.log( Plotly.BUILD );

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script>
</head>


<!-- Plots go in blank <div> elements.
    You can size them in the plot layout,
    or give the div a size as shown here.
-->
<div id="tester" style="width:90%;height:250px;"></div>

最佳答案

找到了几种解决方案。

在找到“100μ”的轴上，您可以告诉轴不要使用格式：

yaxis: {
    exponentformat: "none",
}


这样，将不使用“μ”。

回答的另一个问题是我想像d3一样使用的“功能”。
这不可能。虽然还有另一种选择。
因为您可以使用'tickvals'来给数组提供您想要使用的滴答值。

您可以在tickvals旁边使用ticktext，它将覆盖tickvals中的值。例如：

yaxis: {
    tickvals: ['0', '1','2','3','4'],
    ticktext: ['A', 'B','C','D','E']
}


现在，y轴将使用tickvals作为数据，但是在y轴上的文本中，您将看到A到E。

在我的情况下，我使用的是对数刻度，这需要一些努力才能使其正确。与使用“ yaxis.type = log”时一样，您会在使用tickvals和ticktext时遇到麻烦。由于日志可能会覆盖您的设置。

我的对数刻度为0.01到0.0000001，这在刻度上显示出来。但是我想要1/100（相当于0.01）。

最终我使用了这个：

yaxis: {
    title: 'kans per jaar',
    type: "log",
    exponentformat: "none",
    tickvals: ["0.01", "0.001", "0.0001", "0.00001", "0.000001", "0.0000001"],
    ticktext: ["1/100", "1/1000", "1/10000", "1/100000", "1/1000000", "1/10000000"]
}


您可以在这里看到对我有用的：



var request = {
	"request": "getFloodScenarios",
	"success": true,
	"response": {
		"options": {
			"dataRows": [{
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk-1629077822",
				"name_calculation": "C-kering_Veluwerandmeren_zuidelijk_Flevoland_nulderdijk",
				"probability": "0.0008",
				"conditional_factor": "1.00",
				"waterDepth": "0.3108",
				"exceedance": "0.0013824"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk919981487",
				"name_calculation": "Almere_Stormopzet",
				"probability": "0.000396",
				"conditional_factor": "0.80",
				"waterDepth": "2.67",
				"exceedance": "0.0005824"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk-498661755",
				"name_calculation": "Almere_Stormopzet",
				"probability": "7.425E-05",
				"conditional_factor": "0.15",
				"waterDepth": "2.73",
				"exceedance": "0.0001864"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk-1427412338",
				"name_calculation": "Almere_Stormopzet",
				"probability": "2.475E-05",
				"conditional_factor": "0.05",
				"waterDepth": "2.79",
				"exceedance": "0.00011215"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk2017462865",
				"name_calculation": "Almere_meerpeil",
				"probability": "6.952E-05",
				"conditional_factor": "0.80",
				"waterDepth": "3.08",
				"exceedance": "8.74E-05"
			}, {
				"dikering_nr": "8",
				"geoserver_layer": "VNK:vnk2090682125",
				"name_calculation": "Almere_meerpeil",
				"probability": "1.738E-05",
				"conditional_factor": "0.20",
				"waterDepth": "3.17",
				"exceedance": "1.788E-05"
			}, {
				"dikering_nr": "999",
				"geoserver_layer": " LBEO:Maximale_waterdiepte_NL",
				"name_calculation": "Maximale_waterdiepte_NL",
				"probability": "5E-07",
				"conditional_factor": "1.00",
				"waterDepth": "3.9746999740600586",
				"exceedance": "5.00000000000002E-07"
			}],
			"dikeRing": "8",
			"minExceedance": "5.00000000000002E-07"
		},
		"message": "Scenarios gevonden",
		"token": "7cdd9b03-5c18-4ec2-86dc-c46327fbdde3",
		"step": "report"
	}
};

var newToFixed = function (nr) {

	var arr1 = ("" + nr).split("e"),
		 arr2 = [],
		 fixedPos = null;

	//notation is already normalized
	if (arr1.length === 1) {
		return nr;
	}

	/**
    * remove the + or - from the number
    * now have the exact number digits we want to use in toFixed
    */
	if (arr1[1].indexOf("+") === 0) {
		arr2 = arr1[1].split("+");
	} else {
		arr2 = arr1[1].split("-");
	}

	//making sure it is a number and not a string
	//fixedPos = Number(arr2[1]);
	return nr.toFixed(arr2[1]);

};

var createTickSet = function(minVal, maxVal) {

	var that = this,
		 minEx = parseFloat(Number(minVal).toPrecision()),
		 maxEx = parseFloat(Number(maxVal).toPrecision());

	if (minEx > maxEx) {
		minEx = parseFloat(Number(maxVal).toPrecision());
		maxEx = parseFloat(Number(minVal).toPrecision());
	}

	var min = Math.pow(10, Math.floor(Math.log10(minEx))),
		 max = Math.pow(10, Math.ceil(Math.log10(maxEx))),
		 tickMin = Math.floor(Math.log10(min)),
		 tickMax = Math.ceil(Math.log10(max)),
		 tickTotal = tickMax - tickMin,
		 tickSet = [];

	for (var a = 0; a <= tickTotal; a += 1) {
		tickSet.push(newToFixed(Math.pow(10, tickMin)).toString());
		tickMin += 1;
	}

	return {
		"min": min,
		"max": max,
		"tickMin": tickMin,
		"tickMax": tickMax,
		"tickTotal": tickTotal,
		"tickSet": tickSet
	};
};

var dataRows = request.response.options.dataRows,
	 x = [],
    y = [],
	 maxExceedance = dataRows[0].exceedance,
    minExceedance = dataRows[dataRows.length - 1].exceedance,
	 tickData = createTickSet(minExceedance, maxExceedance),
	 tickSet = tickData.tickSet,
	 firstRow = $.extend(true, {}, dataRows[0]),
	 lastRow = $.extend(true, {}, dataRows[dataRows.length - 1]);

if (firstRow.waterDepth > 0) {
	firstRow.waterDepth = 0;
	dataRows.unshift(firstRow);
}

lastRow.exceedance = tickSet[0];
dataRows.push(lastRow);

for (var i = 0; i < dataRows.length; i += 1) {
	for (keyName in dataRows[i]) {

		if (keyName == "waterDepth") {
			x.push(dataRows[i].waterDepth);
		}
		if (keyName == "exceedance") {
			var exc = Math.round(1/dataRows[i].exceedance);
			y.push(dataRows[i].exceedance);
			//y.push(exc.toString());
		}
	}
}

var tickSet2 = [],
	 tickText = [];

for (var u = 0; u < tickSet.length; u += 1) {
	var rounded = Math.round(1/tickSet[u]),
		 tickStr = '1/' + rounded;

	tickSet2.push(rounded.toString());
	tickText.push(tickStr);
}

console.log(y);
console.log(tickSet);
console.log(tickSet2);
console.log(tickText);

TESTER = document.getElementById('tester');

var line2015 = {
	x: x,
	y: y,
	name: '2015',
	line: {
		shape: 'hv',
		width: 3,
		color: '#1f77b4'
	},
	marker: {
		size: 8
	}
};

var line2015_2 = {
	x: x,
	y: y,
	hoverinfo: 'none',
	name: 'onzekerheid',
	line: {
		shape: 'hv',
	   width: 15,
		color: '#82bfe9'
	}
};


var line2050 = {
	x: x,
	y: y,
	name: '2050',
	line: {
		shape: 'vh',
		dash: 'dash',
		color: '#b45c1f',
		width: 3
	},
	marker: {
		size: 8
	}
};

var data = [line2015_2, line2015, line2050];

var layout = {
	height: 400,
	margin: { t: 50, l: 125 },
	xaxis: {
		title: "Overstromingsdiepte in meter",
		tickmode: "linear"
	},
	yaxis: {
		title: 'kans per jaar',
		type: "log",
	   exponentformat: "none",
		tickvals: ["0.01", "0.001", "0.0001", "0.00001", "0.000001", "0.0000001"],
		ticktext: ["1/100", "1/1000", "1/10000", "1/100000", "1/1000000", "1/10000000"]
	},
};

//Plotly.plot( TESTER, [line2015_2, line2015, line2050], layout);
Plotly.plot( TESTER, data, layout);

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script>
</head>

<!-- Plots go in blank <div> elements.
    You can size them in the plot layout,
    or give the div a size as shown here.
-->
<div id="tester" style="width:90%;height:250px;"></div>

07-23 06:49
Powered by LMLPHP ©2024 tickvals 0.045064