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

Question

我正在使用plotly JS 创建图表。 一切都很好，接受滴答声和悬停。 我有一系列数字，它们通过绘图变成了其他东西。

每个示例:0.0001 将显示为 100μ 我真正想要的是显示为 0.0001 或 1/10000

我尝试通过添加函数来更改刻度格式(就像在 d3 中一样) 但它似乎只接受它可以解释的字符串。 还有其他方法可以更改刻度格式吗？

我尝试将刻度值设置为数组:[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>

Answer 1

Plotly 使用 D3's format对于轴刻度。您可以通过指定 tickformat 来覆盖默认设置。在布局设置中，例如

{xaxis: {tickformat:'.7f'}}

结果是点后有 7 位数字。

myPlot = document.getElementById('myPlot');
Plotly.plot(myPlot, [{
  x: [0.000001, 0.0000002],
  y: [1, 2]
}], {xaxis: {tickformat:'.7f'}});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myPlot'></div>