Question

我正在使用Canvasjs图表来创建柱形图。我想获取位置/位置，图表将在＆＃34; chartContainer（div的ID）＆＃34;中绘制。这是我创建示例的代码。我想将每个柱形图的位置作为偏移值或位置。

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

根据我的研究，我可以在下面的canvasJs图表的onclick函数中找到click事件中列的位置。

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

它可以给出列的位置，但是我想在图表创建过程中获取位置/偏移值，请帮我搞清楚。

任何帮助都会非常有帮助。谢谢

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

如何获取canvasJs图表生成的每列的偏移/位置

1 个答案: