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

Question

我正在使用 canvasjs 创建一个简单的 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 that you have shared, with the help of convertValueToPixel 方法（给定值在特定轴上的 returns 像素坐标）所示进行操作) 或直接设置 CSS top 和 left 属性（以像素为单位），您可以在图表上添加文本。

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 在图表的任何部分添加文本

Add text on any part of a chart using CanvasJs

javascript

html

canvas

charts

canvasjs