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

Question

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

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

<!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>

我的代码输出如下所示：

如何修复CanvasJS气泡图中的所有气泡大小？有没有属性设置和固定所有气泡大小一样的？

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

Answer 1

哈迪克，

您可以尝试 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>

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

How to fix bubble size (marker size) in canvasjs?

html

javascript

jquery

canvasjs