Question

我试图绘制一个有多种因素的情节。我希望这些不同的因素可以通过散射的颜色，大小和形状来区分。这种情节的一个例子是https://github.com/slfan2013/tempPlot/blob/master/Rplot.png。

我想使用javascript库绘制类似的情节。我通常使用plotly.js绘制情节。但我认为情节只能一次处理一个因素（不同的颜色）。我的问题是可以在一个单独的情节（如颜色，大小和形状）中逐个处理多个（嵌套）因子吗？如果没有，如果有任何javascript库可以实现这些？ CanvasJS怎么样？

####编辑。

我理解如何在同一个绘图上绘制不同颜色和不同尺寸（形状等）的散射。我只想在绘图上有一个多因素图例，所以如果我点击“红色”，那么红色散射会隐藏，无论它是什么尺寸，如果我点击大小“大”，大散射无论它是什么颜色都会隐藏。

谢谢！

Answer 1

这可以使用散点图和控制markerType和markerSize在CanvasJS中完成。检查下面显示的示例。

请参阅这些页面以获取markerType和markerSize。

http://canvasjs.com/docs/charts/chart-options/data/markertype/

http://canvasjs.com/docs/charts/chart-options/data/markersize/

var chart = new CanvasJS.Chart("chartContainer",
{
	title: {
		text: "Scatter Chart with Different Marker Types"
	},
	legend: {
	    	horizontalAlign: "right",
	    	verticalAlign: "center"
	},
	data: [
	{
		type: "scatter",
		showInLegend: true,
		legendText: "Circle",
		dataPoints: [
			{ x: 1, y: 91, markerSize: 10 },
			{ x: 2, y: 75, markerSize: 20 },
			{ x: 3, y: 70, markerSize: 30 },
			{ x: 4, y: 85, markerSize: 40 },
			{ x: 5, y: 75, markerSize: 50 }			
		]
	},
	{
		type: "scatter",
		markerType: "square", //default "circle"
		showInLegend: true,
		legendText: "Square",
		dataPoints: [
			{ x: 1, y: 71, markerSize: 10 },
			{ x: 2, y: 55, markerSize: 20 },
			{ x: 3, y: 50, markerSize: 30 },
			{ x: 4, y: 65, markerSize: 40 },
			{ x: 5, y: 55, markerSize: 50 }			
		]
	},
	{
		type: "scatter",
		markerType: "triangle",
		showInLegend: true,
		legendText: "Triangle",
		dataPoints: [
			{ x: 1, y: 51, markerSize: 10 },
			{ x: 2, y: 35, markerSize: 20 },
			{ x: 3, y: 30, markerSize: 30 },
			{ x: 4, y: 45, markerSize: 40 },
			{ x: 5, y: 35, markerSize: 50 }
		]
	},
	{
		type: "scatter",
		markerType: "cross",
		showInLegend: true,
		legendText: "Cross",
		dataPoints: [
			{ x: 1, y: 31, markerSize: 10 },
			{ x: 2, y: 15, markerSize: 20 },
			{ x: 3, y: 10, markerSize: 30 },
			{ x: 4, y: 25, markerSize: 40 },
			{ x: 5, y: 15, markerSize: 50 }
		]
	}
	]
});

chart.render();

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

Answer 2

您只需要定义多条迹线并分别为每条迹线设置参数。

trace0只是默认设置
trace1具有自定义颜色
trace2具有自定义颜色和自定义尺寸
trace3具有自定义颜色，自定义尺寸和自定义符号

＆＃13;

var trace0 = {
  x: [1, 2, 3], 
  y: [1, 2, 3], 
  type: 'scatter', 
  mode:'markers'};
var trace1 = {
  x: [1, 2, 3], 
  y: [2, 1.8, 1], 
  type: 'scatter', 
  mode:'markers', 
  marker: {
    color: 'red'
  }};
var trace2 = {
  x: [1, 2, 3], 
  y: [2.8, 2.3, 1.2], 
  type: 'scatter', 
  mode:'markers', 
  marker: {
    color: 'green', 
    size: [10, 15, 20]
  }};
var trace3 = {
  x: [1, 2, 3], 
  y: [3, 2.5, 1], 
  type: 'scatter', 
  mode:'markers', 
  marker: {
    color: 'pink', 
    size: [10, 15, 20], 
    symbol: 303
  }};

Plotly.plot('myDiv', [trace0, trace1, trace2, trace3])

＆＃13;

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

＆＃13;

多因素图例

2 个答案: