Добавьте текст в любую часть диаграммы, используя CanvasJs - PullRequest
Новая
       133

Добавьте текст в любую часть диаграммы, используя CanvasJs

0 голосов
/ 29 ноября 2018

Я использую 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

есть ли способ добавить текст по координатам / значениям?

1 Ответ

0 голосов
/ 03 декабря 2018

Если вы хотите показать некоторую информацию, связанную с точкой данных, вы можете использовать свойство 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 (который возвращает координаты пикселя заданного значения по определенной оси) или путем прямой установки свойств top и left 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>
...