ZingChart 在点击时获得十字准线位置

Question

ZingChart click 事件声明回调将接收一个对象。 x 属性将包含

The x position of the click relative to the chart position

我假设这是 window 中的光标位置（即像素）相对于包含图形的 div 元素的位置（左上角？）。

有没有办法在点击时获取十字准线位置的"X"值，如图所示： Example

即如果十字准线位于“0”，我想在点击时获得该值。当我使用点击事件的 arg.x 时，十字准线位于“0”，我得到 49，我需要 0.

代码：

var values = [0,2.81,5.61,8.38, ...]

var chartData={
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px"
        },
        "maxLabels":10
    },
    "scrollX":{ },
    "scaleY":{
        "minValue":"auto",
        "autoFit":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-right":"5px"
        },
        "guide":{
            "lineStyle":"solid",
            "line-color":"#c7c9c9",
            "alpha":0.2
        }
    },
    "tooltip":{
        "visible":false
    },
    "crosshairX":{
        "lineWidth":1,
        "line-color":"#003849",
        "marker":{
            "size":4,
            "type":"circle",
            "borderColor":"#fff",
            "borderWidth":1
        },
        "scale-label":{
            "font-color":"#ffffff",
            "background-color":"#003849",
            "padding":"5px 10px 5px 10px",
            "border-radius":"5px"
        },
//            "plotLabel":{
//                "multiple":false,
//                "callout":false,
//                "shadow":false,
//                "height":"115px",
//                "padding":"5px 10px 5px 10px",
//                "border-radius":"5px",
//                "alpha":1,
//                "headerText":"Node %scale-key-text<br>",
//                "text":"<b>%plot-text:</b> %node-value"
//            }
    },

    "series":[  // Insert your series data here.
        {   "text": "P1",
            "values": values,
            "line-color":"#7ca82b",
            "line-width":1
        },
    ]
};
zingchart.render({ // Render Method[3]
    id:'id_graph_box',
    data:chartData,
    height:400,
    width:800,
});
zingchart.click=function(p) {
    console.log("GRAPH CLICKEND ON X:", p)

Answer 1

坦白说，我是 ZingChart 团队的一员。

是的，这些值是相对于图表位置的。您可以做的是使用我们的 API 方法根据点击的 xy 位置获取您需要的图表信息。您将使用 getxyinfo，它将获取有关图表的一系列信息。它将获取最接近点击发生位置的比例信息。这意味着如果您在两个节点之间单击（对于 scale-x），以最接近（单击的 x 位置）为准，它将为您提供该信息。 crosshair/guide 在突出显示节点时的工作方式相同，因此这应该不是问题。我只是觉得有必要提出来。

下面的演示使用 console.log() 输出看起来有点古怪。 Here 也是我们主办的 link。

var values = [0,2.81,5.61,8.38];

var chartData = {
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px"
        },
        "maxLabels":10
    },
    "scrollX":{ },
    "scaleY":{
        "minValue":"auto",
        "autoFit":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-right":"5px"
        },
        "guide":{
            "lineStyle":"solid",
            "line-color":"#c7c9c9",
            "alpha":0.2
        }
    },
    "tooltip":{
        "visible":false
    },
    "crosshairX":{
        "lineWidth":1,
        "line-color":"#003849",
        "marker":{
            "size":4,
            "type":"circle",
            "borderColor":"#fff",
            "borderWidth":1
        },
        "scale-label":{
            "font-color":"#ffffff",
            "background-color":"#003849",
            "padding":"5px 10px 5px 10px",
            "border-radius":"5px"
        },
//            "plotLabel":{
//                "multiple":false,
//                "callout":false,
//                "shadow":false,
//                "height":"115px",
//                "padding":"5px 10px 5px 10px",
//                "border-radius":"5px",
//                "alpha":1,
//                "headerText":"Node %scale-key-text<br>",
//                "text":"<b>%plot-text:</b> %node-value"
//            }
    },

    "series":[  // Insert your series data here.
        {   "text": "P1",
            "values": values,
            "line-color":"#7ca82b",
            "line-width":1
        },
    ]
};

zingchart.render({ 
 id: 'myChart', 
 data: chartData, 
 height: '100%', 
 width: '100%' 
});

zingchart.bind('myChart', 'click', function(e) {
  
  /*
   * Returns array of information. 
   * xyInformation[0] -> scale-x info 
   * xyInformation[1] -> scale-y info 
   * xyInformation[2] -> node info
   */
  var xyInformation = zingchart.exec('myChart', 'getxyinfo', {
    x: e.x,
    y: e.y
  });
  console.log(xyInformation)
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}

#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
  <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
 <!--Inject End-->
 </head>
 <body>
  <div id="myChart"></div>
 </body>
</html>

ZingChart 在点击时获得十字准线位置

ZingChart get crosshair position on click

javascript

charts

zingchart