Question

我正在使用canvas.js创建一个简单的x / y散点图

    var chart = new CanvasJS.Chart('chartContainer',
    {

    toolTip:{   
    content: '{x} : {y} : {label}'      
    },

    axisX: {
    minimum: 0,
    maximum: 11,
    interval: 1,
    labelFormatter: function(e){
    return e.value;
    }
    },

    axisY: {
    minimum: 0,
    maximum: 100,
    interval: 10,
    intervalType: 'number',
    gridThickness: 0,
    stripLines: [
    {
        value: 0,
        showOnTop: true,
        color: 'gray',
        thickness: 2
    }
    ]
    },

      data: [
    {        
        type: 'line',
    lineColor:'grey',
    markerColor:'grey',
        dataPoints: [
        { x: lsx, y: lsy},
        { x: lex, y: ley},
        ]
    },
    {        
        type: 'line',
    lineColor:'grey',
    markerColor:'grey',
        dataPoints: [
        { x: lsx2, y: lsy2},
        { x: lex2, y: ley2},
        ]
    },
    {        
        type: 'line',
    lineColor:'grey',
    markerColor:'grey',
        dataPoints: [
        { x: lsx3, y: lsy3},
        { x: lex3, y: ley3},
        ]
    },


      {
        type: 'scatter',
    cursor: 'pointer',
    markerSize: 15,
    markerColor:'#1FBED6',
    dataPoints: dataPoints
   }


    ]



    });

    chart.render();

这很好用，我得到了想要的图形。我有一些带有点的区域，我想在图形中添加文字以说明每个区域的含义。

我查看并仅遇到一个使用convertValueToPixel来定位索引标签的示例，如图jsfiddle

是否可以通过坐标/值添加文本？

Answer 1

如果您想显示一些与数据点有关的信息，则可以使用indexLabel属性。请在下面找到代码：

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Scatter Chart with IndexLabels",
  },

  data: [
   {        
     type: "scatter",
     indexLabel: "{y}",
     markerSize: 25,
     dataPoints: [
       { y: 10 },
       { y: 15 },
       { y: 25 },
       { y: 30 },
       { y: 28 }          
     ] 
   }
  ]
});

chart.render();

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

如果您想在图表上的任意位置显示一些额外的文本和位置，可以通过JSFiddle方法（该方法返回像素）来显示您共享的convertValueToPixel给定值在特定轴上的坐标）或通过直接设置CSS顶部和左侧属性（以像素为单位），您可以在图表上方添加文本。

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Position External DOM on Chart"
  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }					
  ]
});
chart.render();

var text = document.createElement("p");
text.innerHTML = "Some Text";
document.getElementById("chartContainer").appendChild(text);
text.style.position = "absolute";
text.style.top = chart.axisY[0].convertValueToPixel(65) - (text.clientHeight / 2)  + "px";
text.style.left = chart.axisX[0].convertValueToPixel(20) - (text.clientWidth / 2 - 5) + "px";

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

使用CanvasJs在图表的任何部分上添加文本

1 个答案: