如何修复canvasjs中的气泡大小（标记大小）？

时间：2016-11-18 18:40:31

标签： javascript jquery html5 canvasjs

我希望图表看起来像这样：chart screenshot

到目前为止，我非常接近我的预期输出但不完全符合我的要求。这是我目前的代码库：

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
      window.onload = function () {
      var ToolTipHtml = "";
        ToolTipHtml += "<div><b>{number}</b></div>";

    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "SEStimate Planning Graph"  
      },
	     axisX: {
                title: "Age in Months",
				interval:1
				
            },
            axisY: {
                title: "SEstimate Score",
				interval:5,
				gridThickness: 0
            },
      creditText: "Hardiks Line Chart",
      data: [
	  {        
        type: "line",
		color:"blue",
		markerSize:0,
		toolTipContent: "",
        lineThickness:2,
        dataPoints: [
        { x: 36, y: 35 },
        { x: 45, y: 35}
        ]
      },
	  {        
        type: "line",
		color:"blue",
		toolTipContent: "",
		markerSize:0,
        lineThickness:2,
        dataPoints: [
        { x: 42, y: 0 },
        { x: 42, y: 43}
        ]
      },
      {        
        type: "line",
		color:"cyan",
		toolTipContent: "",
        lineThickness:2,
		indexLabelPlacement: "inside",
        dataPoints: [
        { x: 43, y: 35},
        { x: 48, y: 37,markerSize:20, indexLabel:"5"},
		{x:55,y:42,markerSize:20, indexLabel:"5"}
        ]
      },
	  {        
        type: "line",
		color:"purple",
		toolTipContent: "",
        lineThickness:2,
		markerSize:27,
        dataPoints: [
        { x: 43, y: 35 },
        { x: 48, y: 43,indexLabel:"10"},
		{x:55,y:54, indexLabel:"10"},
		{x:61,y:60, indexLabel:"10"},
		{x:67,y:70, indexLabel:"10"},
        ]
      },
      {        
          type: "line",
		  color:"red",
		  toolTipContent: "",
        lineThickness:2,
		markerSize:0,
          lineDashType: "dash",
          dataPoints: [
          { x: 41, y: 25 },
          { x: 47, y: 25},
		  { x: 61, y: 58},
		  { x: 72, y: 58}
          ]
      },
        {        
        type: "line",
		color:"green",
		toolTipContent: "",
        lineThickness:2,
		markerSize:0,
		lineDashType: "dash",
        dataPoints: [
        { x: 40, y: 30, abc:"hardy1" },
        { x: 61, y: 76, abc:"hardy2"},
        { x: 72, y: 76, abc:"hardy3" }
        ]
      },
	  {
	  type: "bubble",
	  toolTipContent: "",
	   indexLabelPlacement: "inside", 
     dataPoints: [
     { x: 39, y: 20,z:2.0, number: "II",indexLabel: "II",markerColor: "yellow", radius:  "90%" },
     { x: 39, y: 30,z:2.0, number: "HH", indexLabel:"HH",markerColor: "yellow", radius:  "90%" },
	 { x: 42, y: 35,z:2.0, number: "JJ", indexLabel:"JJ",markerColor: "yellow", radius:  "90%"},
     { x: 45, y: 45, z:2.0, number: "GG", indexLabel:"GG",markerColor: "yellow", radius:  "90%"},
	 { x: 48, y: 50, z:2.0, markerSize:10,number: "EE", indexLabel:"EE",markerColor: "yellow", radius:  "90%"},
	 { x: 48, y: 35, z:2.0, markerSize:10, number: "FF", indexLabel:"FF",markerColor: "yellow", radius:  "90%"},
	 { x: 51, y: 43, z:2.0, number: "DD", indexLabel:"DD",markerColor: "yellow", radius:  "90%"},
	 { x: 52, y: 81, z:2.0, number: "CC", indexLabel:"CC",markerColor: "yellow", radius:  "90%"},
	 { x: 54, y: 35, z:2.0, number: "BB", indexLabel:"BB",markerColor: "yellow", radius:  "90%"},
	 {	 x: 54, y: 70, z:2.0, number: "AA", indexLabel:"AA",markerColor: "yellow", radius:  "90%"}
     ]
	  }
      
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
  </head>
<body>
  <div id="chartContainer" style="height: 450px; width: 100%;">
  </div>
</body>
</html>

我的代码输出如下所示： screenshot of the code output

如何修复CanvasJS气泡图中的所有气泡大小？是否有任何属性可以设置和修复相同尺寸的所有气泡？

到目前为止，我尝试了markerSize属性并将所有气泡数据的z字段值设置为相同，但所有气泡看起来都非常大。我想以小尺寸显示气泡。

1 个答案:

答案 0 :(得分：1)

Hardik，

您可以尝试使用scatter chart代替冒泡来实现这一目标。

请查看此jsfiddle以获取符合您要求的解决方案。

var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";

var chart = new CanvasJS.Chart("chartContainer",{
	title:{
		text: "SEStimate Planning Graph",
		fontSize: 40,
		fontColor: "#000",
		horizontalAlign: "left"
	},
	axisX: {
		title: "Age in Months",
		interval: 1,
		minimum: 35.5,
		labelFontSize: 14,
		labelFontColor: "#000",
		titleFontColor: "#000",
		titleFontSize: 20,
		tickColor: "transparent",
		lineColor: "#4A83BA",
	},
	axisY: {
		title: "SEstimate Score",
		interval:5,
		gridThickness: 0,
		labelFontSize: 14,
		labelFontSize: 14,
		labelFontColor: "#000",
		titleFontColor: "#000",
		titleFontSize: 20,
		tickColor: "transparent",
		lineColor: "#4A83BA",
		maximum: 100,
	},
	data: [
		{        
		type: "line",
		color:"#4A83BA",
		markerSize:0,
		toolTipContent: "",
		lineThickness:2,
		dataPoints: [
			{ x: 35, y: 35 },
			{ x: 36, y: 35 },
			{ x: 45, y: 35}
		]
		},
		{        
		type: "line",
		color:"#4A83BA",
		toolTipContent: "",
		markerSize:0,
		lineThickness:2,
		dataPoints: [
			{ x: 42, y: 0 },
			{ x: 42, y: 43 }
		]
		},
		{        
		type: "line",
		color:"#00B2EC",
		lineThickness:2,		
		markerSize:30,
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 37 },
			{ x: 55, y:42 }
		]
		},
		{        
		type: "scatter",
		color:"#00B2EC",		
		indexLabelPlacement: "inside",		
		indexLabelFontSize: 16,
		indexLabelFontColor: "#fff",
		markerSize:30,
		markerBorderThickness: 1,
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 37, indexLabel:"5" },
			{ x: 55, y:42, indexLabel:"5" }
		]
		},
		{        
		type: "line",
		color:"purple",
		toolTipContent: "",
		lineThickness:2,
		markerSize:30,
		markerBorderThickness: 1,
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 43 },
			{ x: 55, y: 54 },
			{ x: 61, y: 60 },
			{ x: 67, y: 70 },
		]
		},
		{
		type: "scatter",
		color:"purple",
		toolTipContent: "",
		indexLabelPlacement: "inside",
		indexLabelFontSize: 16,
		indexLabelFontColor: "#fff",
		markerSize:30,
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 43, indexLabel:"10" },
			{ x:55, y:54, indexLabel:"10" },
			{ x:61, y:60, indexLabel:"10" },
			{ x:67, y:70, indexLabel:"10" },
		]
		},
		{        
		type: "line",
		color:"red",
		toolTipContent: "",
		lineThickness:3,
		markerSize:0,
		lineDashType: "dash",
		dataPoints: [
			{ x: 41, y: 25 },
			{ x: 47, y: 25 },
			{ x: 61, y: 58 },
			{ x: 72, y: 58 }
		]
		},
		{        
		type: "line",
		color:"#00F84C",
		toolTipContent: "",
		lineThickness: 3,
		markerSize:0,
		lineDashType: "dash",
		dataPoints: [
			{ x: 40, y: 30, abc:"hardy1" },
			{ x: 61, y: 76, abc:"hardy2" },
			{ x: 72, y: 76, abc:"hardy3" }
		]
		},
		{
		type: "scatter",
		toolTipContent: "",
		indexLabelPlacement: "inside",
		indexLabelFontSize: 14,
		indexLabelFontColor:"#1BBDCA",
		markerSize: 30,
		markerBorderThickness: 1,
		markerColor:"#FFFC47",
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 39, y: 20, number: "II", indexLabel: "II" },
			{ x: 39, y: 30, number: "HH", indexLabel: "HH" },
			{ x: 42, y: 35, number: "JJ", indexLabel: "JJ" },
			{ x: 45, y: 45, number: "GG", indexLabel: "GG" },
			{ x: 48, y: 50, number: "EE", indexLabel: "EE" },
			{ x: 48, y: 35, number: "FF", indexLabel: "FF" },
			{ x: 51, y: 43, number: "DD", indexLabel: "DD" },
			{ x: 52, y: 81, number: "CC", indexLabel: "CC" },
			{ x: 54, y: 35, number: "BB", indexLabel: "BB" },
			{ x: 54, y: 70, number: "AA", indexLabel: "AA" }
		]
		}
	]
});

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

相关问题
最新问题