Как получить смещение / положение каждого столбца, созданного с помощью диаграммы CanvasJS

ProgramBox

Как получить смещение / положение каждого столбца, созданного с помощью диаграммы CanvasJS

Post author:admin
Запись опубликована:31 января, 2023
Post category:Вопросы по программированию

#jquery #html #canvasjs

#jquery #HTML #canvasjs

Вопрос:

Я использую диаграммы Canvasjs для создания диаграммы столбцов.Я хочу получить местоположение / позицию, где диаграмма рисуется в «chartContainer (идентификатор div)». Вот мой код, образец которого я создал.Здесь я хочу получить местоположение каждой столбчатой диаграммы либо как значение смещения, либо как позицию.

 <html>
<head>
  <script type="text/javascript">
  window.onload = function () {
      Reviewed = [{ x: 1, y: 10 },
    { x: 2, y: 15 },
    { x: 3, y: 25 },
    { x: 4, y: 30 },
    { x: 5, y: 28 },
    { x: 6, y: 10 },
    { x: 7, y: 15 },
    { x: 8, y: 25 },
    { x: 9, y: 30 },
    { x: 10, y: 28 },
    { x: 11, y: 10 },
    { x: 12, y: 15 },
    { x: 13, y: 25 },
    { x: 14, y: 30 },
    { x: 15, y: 28 },
    { x: 16, y: 10 },
    { x: 17, y: 15 },
    { x: 20, y: 25 },
    { x: 21, y: 30 },
    { x: 25, y: 28 },
    { x: 26, y: 10 },
    { x: 27, y: 15 },
    { x: 28, y: 25 },
    { x: 30, y: 30 },
    { x: 40, y: 28 }]


    var chart = new CanvasJS.Chart("chartContainer",
    {
        zoomEnabled: true,
                width: 760,
                height: 50,
                theme: "theme4",
                toolTip: {
                    enabled: false,
                },
                axisX: {
                    gridThickness: 0.0,
                    interval: 60,
                    labelFontSize: 0.1,
                    tickLength: 0.0,
                    lineThickness: 1
                },

                axisY: {
                    gridThickness: 0.0,
                    interval: 10,
                    labelFontSize: 0.1,
                    tickLength: 0.0,
                    lineColor: "white",
                    lineThickness: 0.1
                },
                dataPointWidth: 2,
                dataPointMaxWidth: 5,
      data: [
      {
         type: "column",
         cursor: "pointer",
         click: onClick,
         dataPoints: Reviewed
    });

    chart.render();
  }
  </script>
  <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

Основываясь на моем исследовании, я смог найти положение столбца в событии щелчка в функции onclick диаграммы CanvasJS, как показано ниже.

  function onClick(e) {
                alert(e.dataPoint.x)//, userId, window.event);
                var a = parseInt(e.x) - 10;
                document.getElementById('indicator').style.width = a   'px'
            }

Это может указывать местоположение столбца, но я хочу получить значение положения / смещения во время создания диаграммы, пожалуйста, помогите мне получить отклонение.

любая помощь будет очень полезна.Спасибо

1. Вы можете получить x и y из e.x и e.y и значение элемента из e.dataPointIndex 1

2. например, я могу получить событие щелчка, но мне нужно значение индекса / позиции во время визуализации диаграммы

3. e.dataPointIndex предоставляет мне индекс, но я хочу, чтобы местоположение / положение, в котором диаграммы столбцов получают отображение, например, например, column1, отображаемый в позиции с разрешением 201px слева

4. Вы можете получить положение мыши, используя: $(document).mousemove(функция (событие) { currentMousePos.x = event.pageX; currentMousePos . y = event.pageY; });

5. @mbadeveloper это событие мыши, которое определяет позиции перемещения мыши. но на самом деле я хочу, чтобы позиция отображения диаграммы столбцов

Ответ №1:

   window.onload = function () {
      Reviewed = [{ x: 1, y: 10 },
    { x: 2, y: 15 },
    { x: 3, y: 25 },
    { x: 4, y: 30 },
    { x: 5, y: 28 },
    { x: 6, y: 10 },
    { x: 7, y: 15 },
    { x: 8, y: 25 },
    { x: 9, y: 30 },
    { x: 10, y: 28 },
    { x: 11, y: 10 },
    { x: 12, y: 15 },
    { x: 13, y: 25 },
    { x: 14, y: 30 },
    { x: 15, y: 28 },
    { x: 16, y: 10 },
    { x: 17, y: 15 },
    { x: 20, y: 25 },
    { x: 21, y: 30 },
    { x: 25, y: 28 },
    { x: 26, y: 10 },
    { x: 27, y: 15 },
    { x: 28, y: 25 },
    { x: 30, y: 30 },
    { x: 40, y: 28 }]


    var chart = new CanvasJS.Chart("chartContainer",
    {
        zoomEnabled: true,
                width: 760,
                height: 50,
                theme: "theme4",
                toolTip: {
                    enabled: false,
                },
                axisX: {
                    gridThickness: 0.0,
                    interval: 60,
                    labelFontSize: 0.1,
                    tickLength: 0.0,
                    lineThickness: 1
                },

                axisY: {
                    gridThickness: 0.0,
                    interval: 10,
                    labelFontSize: 0.1,
                    tickLength: 0.0,
                    lineColor: "white",
                    lineThickness: 0.1
                },
                dataPointWidth: 2,
                dataPointMaxWidth: 5,
      data: [
      {
         type: "column",
         cursor: "pointer",
         click: onClick,
         dataPoints: Reviewed
    }]
	}
	);
    chart.render();
  }
  
function onClick(e) {
	alert('Element index is: '   (e.dataPointIndex 1)   ', Position X:'   e.x   ',Position Y:'  e.y);
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<html>
 <head>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

1. Спасибо за вашу поддержку, но все же приведенное выше решение не решает мою проблему. Я хочу, чтобы эта позиция при загрузке графика отсутствовала в событии щелчка. как я упоминал в своем первом посте, я мог бы получить положение каждого столбца в событии щелчка.

2. Я проверил веб-сайт на предмет контроля диаграммы, и на нем нет события загрузки

3. да, mbadeveloper. Спасибо за вашу поддержку. Есть ли какое-либо другое событие мыши / событие диаграммы, которое могло бы помочь мне получить решение.? пожалуйста, дайте мне знать