當前位置: 首頁>>代碼示例>>TypeScript>>正文

TypeScript js.newPlot方法代碼示例

本文整理匯總了TypeScript中plotly.js.newPlot方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript js.newPlot方法的具體用法？TypeScript js.newPlot怎麽用？TypeScript js.newPlot使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類plotly.js的用法示例。


在下文中一共展示了js.newPlot方法的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: 

(() => {
	const trace1 = {
		x: [1999, 2000, 2001, 2002],
		y: [10, 15, 13, 17],
		type: 'scatter'
	} as ScatterData;
	const trace2 = {
		x: [1999, 2000, 2001, 2002],
		y: [16, 5, 11, 9],
		type: 'scatter'
	} as ScatterData;
	const data = [trace1, trace2];
	const layout = {
		title: 'Sales Growth',
		xaxis: {
			title: 'Year',
			showgrid: false,
			zeroline: false
		},
		yaxis: {
			title: 'Percent',
			showline: false
		}
	};
	Plotly.newPlot(graphDiv, data, layout);
})();
開發者ID:adidahiya，項目名稱:DefinitelyTyped，代碼行數:26，代碼來源:index-tests.ts

示例2: 

(() => {
	// deprecated: calling plot again will add new trace(s) to the plot,
	// but will ignore new layout.
	const data2 = [{
		x: [1999, 2000, 2001, 2002],
		y: [10, 9, 8, 7],
		type: 'scatter'
	} as PlotData];
	const layout2 = { title: 'Revenue' };
	Plotly.newPlot(graphDiv, data2, layout2);
})();
開發者ID:CNBoland，項目名稱:DefinitelyTyped，代碼行數:11，代碼來源:index-tests.ts

示例3: 

/// <reference path="plotly.js.d.ts" />

import * as Plotly from 'plotly.js';

var data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('test', data);
開發者ID:ASnow，項目名稱:DefinitelyTyped，代碼行數:13，代碼來源:plotly.js-tests.ts

示例4: newPlot

(async () => {
	const myPlot = await newPlot(graphDiv, [{
		x: [1999, 2000, 2001, 2002],
		y: [10, 9, 8, 7],
		type: 'scatter'
	}]);
	myPlot.on('plotly_click', (data) => {
		let pn = 0;
		let tn = 0;
		let colors = [] as string[];
		for (const pt of data.points) {
			pn = pt.pointNumber;
			tn = pt.curveNumber;
			colors = pt.data.marker.color as string[];
		}
		colors[pn] = '#C54C82';

		const update = { marker: { color: colors, size: 16 } };
		Plotly.restyle('myDiv', update, [tn]);
	});

	myPlot.on('plotly_hover', (data) => {
		let pn = 0;
		let tn = 0;
		let colors = [] as string[];
		for (const pt of data.points) {
			pn = pt.pointNumber;
			tn = pt.curveNumber;
			colors = pt.data.marker.color as string[];
		}
		colors[pn] = '#C54C82';

		const update = { marker: { color: colors, size: 16 } };
		Plotly.restyle('myDiv', update, [tn]);
	});

	myPlot.on('plotly_unhover', (data) => {
		let pn = 0;
		let tn = 0;
		let colors = [] as string[];
		for (const pt of data.points) {
			pn = pt.pointNumber;
			tn = pt.curveNumber;
			colors = pt.data.marker.color as string[];
		}
		colors[pn] = '#00000';

		const update = { marker: { color: colors, size: 16 } };
		Plotly.restyle('myDiv', update, [tn]);
	});

	myPlot.on('plotly_selected', (data) => {
		const x = [] as Datum[];
		const y = [] as Datum[];
		const N = 1000;
		const color1 = '#7b3294';
		const color1Light = '#c2a5cf';

		const colors = [] as string[];
		for (let i = 0; i < N; i++) colors.push(color1Light);

		data.points.forEach((pt) => {
			x.push(pt.x);
			y.push(pt.y);
			colors[pt.pointNumber] = color1;
		});

		Plotly.restyle(myPlot, {
			x: [x, y]
		}, [1, 2]);

		Plotly.restyle(myPlot, {
			'marker.color': [colors]
		}, [0]);
	});

	myPlot.on('plotly_restyle', (data) => {
		console.log('restyling');
	});

	myPlot.on('plotly_doubleclick', () => {
		const orgColors = ['#00000', '#00000', '#00000',
			'#00000', '#00000', '#00000'];
		const update = { marker: { color: orgColors, size: 16 } };
		Plotly.restyle('myDiv', update);
	});

	myPlot.on('plotly_beforeplot', (event) => {
		console.log('plotting');
		const okToPlot = true;
		return okToPlot;
	});

	myPlot.on('plotly_afterplot', () => {
		console.log('done plotting');
	});

	myPlot.on('plotly_animatingframe', (event) => {
		console.log(`animating ${event.frame.name} with ${event.animation.transition.easing}`);
	});
//.........這裏部分代碼省略.........
開發者ID:CNBoland，項目名稱:DefinitelyTyped，代碼行數:101，代碼來源:index-tests.ts

示例5: unpack


//.........這裏部分代碼省略.........
		},
		{
			country: "Austria",
			year: 2001,
			pop: 7914969,
			continent: "Europe",
			lifeExp: 76.04,
			gdpPercap: 27042.01868
		},
	];

	interface DataRow {
		[key: string]: string | number;
	}

	function unpack(rows: DataRow[], key: string) {
		return rows.map((row: DataRow) => row[key]);
	}

	const trace1 = {
		mode: 'markers',
		x: unpack(testrows, 'lifeExp'),
		y: unpack(testrows, 'gdpPercap'),
		text: unpack(testrows, 'continent'),
		marker: {
			size: unpack(testrows, 'pop'),
			sizemode: "area",
			sizeref: 200000
		},
		type: 'scatter',
		transforms: [
			{
				type: 'filter',
				target: unpack(testrows, 'year'),
				operation: '=',
				value: '2002'
			}, {
				type: 'groupby',
				nameformat: `%{group}`,
				groups: unpack(testrows, 'continent'),
				styles: [
					{ target: 'Asia', value: { marker: { color: 'red' } } },
					{ target: 'Europe', value: { marker: { color: 'blue' } } },
					{ target: 'Americas', value: { marker: { color: 'orange' } } },
					{ target: 'Africa', value: { marker: { color: 'green' } } },
					{ target: 'Oceania', value: { marker: { color: 'purple' } } }
				]
			}, {
				type: 'aggregate',
				groups: unpack(testrows, 'continent'),
				aggregations: [
					{ target: 'x', func: 'avg' },
					{ target: 'y', func: 'avg' },
					{ target: 'marker.size', func: 'sum' }
				]
			}]
	} as PlotData;
	const trace2 = {
		yaxis: 'y2',
		x: unpack(testrows, 'lifeExp'),
		name: 'x density',
		marker: { color: 'rgb(102,0,0)' },
		type: 'histogram'
	} as PlotData;
	const trace3 = {
		xaxis: 'x2',
		y: unpack(testrows, 'gdpPercap'),
		name: 'y density',
		marker: { color: 'rgb(102,0,0)' },
		type: 'histogram'
	} as PlotData;
	const data = [trace1, trace2, trace3];
	const layout = {
		title: 'Gapminder',
		xaxis: {
			title: 'Life Expectancy',
			domain: [0, 0.85],
			showgrid: false,
			zeroline: false
		},
		yaxis: {
			title: 'GDP per Cap',
			showline: false,
			domain: [0, 0.85],
			showgrid: false,
			zeroline: false
		},
		xaxis2: {
			domain: [0.85, 1],
			showgrid: false,
			zeroline: false
		},
		yaxis2: {
			domain: [0.85, 1],
			showgrid: false,
			zeroline: false
		}
	};
	Plotly.newPlot(graphDiv, data, layout);
})();
開發者ID:CNBoland，項目名稱:DefinitelyTyped，代碼行數:101，代碼來源:index-tests.ts

示例6: newPlot

(async () => {
	const myPlot = await newPlot(graphDiv, [{
		x: [1999, 2000, 2001, 2002],
		y: [10, 9, 8, 7],
		type: 'scatter'
	}]);
	myPlot.on('plotly_click', (data) => {
		let pn = 0;
		let tn = 0;
		let colors = [] as string[];
		for (const pt of data.points) {
			pn = pt.pointNumber;
			tn = pt.curveNumber;
			colors = pt.data.marker.color as string[];
		}
		colors[pn] = '#C54C82';

		const update = { marker: { color: colors, size: 16 } };
		Plotly.restyle('myDiv', update, [tn]);
	});

	myPlot.on('plotly_hover', (data) => {
		let pn = 0;
		let tn = 0;
		let colors = [] as string[];
		for (const pt of data.points) {
			pn = pt.pointNumber;
			tn = pt.curveNumber;
			colors = pt.data.marker.color as string[];
		}
		colors[pn] = '#C54C82';

		const update = { marker: { color: colors, size: 16 } };
		Plotly.restyle('myDiv', update, [tn]);
	});

	myPlot.on('plotly_unhover', (data) => {
		let pn = 0;
		let tn = 0;
		let colors = [] as string[];
		for (const pt of data.points) {
			pn = pt.pointNumber;
			tn = pt.curveNumber;
			colors = pt.data.marker.color as string[];
		}
		colors[pn] = '#00000';

		const update = { marker: { color: colors, size: 16 } };
		Plotly.restyle('myDiv', update, [tn]);
	});

	myPlot.on('plotly_selected', (data) => {
		const x = [] as number[];
		const y = [] as number[];
		const N = 1000;
		const color1 = '#7b3294';
		const color1Light = '#c2a5cf';

		const colors = [] as string[];
		for (let i = 0; i < N; i++) colors.push(color1Light);

		data.points.forEach((pt) => {
			x.push(pt.x);
			y.push(pt.y);
			colors[pt.pointNumber] = color1;
		});

		Plotly.restyle(myPlot, {
			x: [x, y]
		}, [1, 2]);

		Plotly.restyle(myPlot, {
			'marker.color': [colors]
		}, [0]);
	});

	myPlot.on('plotly_restyle', (data) => {
		console.log('restyling');
	});

	myPlot.on('plotly_doubleclick', () => {
		const orgColors = ['#00000', '#00000', '#00000',
			'#00000', '#00000', '#00000'];
		const update = { marker: { color: orgColors, size: 16 } };
		Plotly.restyle('myDiv', update);
	});

	myPlot.on('plotly_afterplot', () => {
		console.log('done plotting');
	});
})();
開發者ID:AbraaoAlves，項目名稱:DefinitelyTyped，代碼行數:91，代碼來源:index-tests.ts


注：本文中的plotly.js.newPlot方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。