刻度显示为100μ而不是0.0001

时间：2017-03-17 08:46:13

标签： javascript plotly

我使用plotly JS来创建图表。 一切都很好，接受蜱虫和徘徊。 我有一系列数字，他们通过剧情变成了别的东西。

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

我尝试通过添加一个函数来更改tickformat（就像你在d3中一样） 但它似乎只接受一个它可以解释的字符串。 有没有其他方法来改变tickformat？

我尝试将滴答声设置为数组：[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>

3 个答案:

答案 0 :(得分：1)

找到了几种解决方案。

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

yaxis: {
    exponentformat: "none",
}

这样就不会使用'μ'。

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

您可以使用ticktext旁边的滴答声，这将覆盖滴答声中的值。每个例子：

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

现在yaxis将使用数据的tickvals，但在yaxis的文本中你会看到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>

答案 1 :(得分：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>

答案 2 :(得分：0)

tickformat应该是要走的路。如果你将其设置为"r"，你应该得到你想要的。

你是对的，tickformat的格式是d3。 r代表“十进制表示法，四舍五入到有效数字”。那将为你提供0.0001而不是100μ。 d3的文档可以在这里找到：https://github.com/d3/d3-format/blob/master/README.md#locale_format

相关问题
最新问题