Javascript ZingChart在单击时获取十字线位置

ZingChart

click

事件表示回调将接收一个对象。

x

属性将包含

单击相对于图表位置的x位置

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

是否有一种方法可以在点击时获得十字线位置的“X”值，如图所示：

i、 e.如果十字线位于“0”，我希望在单击时获得该值。当我使用click事件的

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)

var值=[0,2.81,5.61,8.38，…]
var图表数据={
“type”：“line”，//在此处指定图表类型。
“背景色”：“#F4”，
“scale-x”：{
“缩放”：正确
},
“情节”：{
//“模式”：“快速”，
“精确”：正确，
//“智能采样”：正确，
//“maxNodes”：0，
//“maxTrackers”：0，
“线宽”：2，
“影子”：假，
“标记”：{
“类型”：“无”，
“影子”：假
}
},
“绘图区域”：{
“背景色”：“#fbfb”，
“页边距顶部”：“30px”，
“保证金底部”：“40px”，
“左边距”：“50px”，
“右边距”：“30px”
},
“scaleX”：{
“自动拟合”：正确，
“缩放”：没错，
“正常化”：正确，
“线宽”：1，
“线条颜色”：“c7c9c9”，
“勾选”：{
“线宽”：1，
“线条颜色”：“#c7c9c9”
},
“指南”：{
“可见”：错误
},
“项目”：{
“字体颜色”：“#818181”，
“字体系列”：“Arial”，
“填充顶部”：“5px”
},
“最大标签”：10
},
“scrollX”：{}，
“scaleY”：{
“最小值”：“自动”，
“自动拟合”：正确，
“线宽”：1，
“线条颜色”：“c7c9c9”，
“勾选”：{
“线宽”：1，
“线条颜色”：“#c7c9c9”
},
“项目”：{
“字体颜色”：“#818181”，
“字体系列”：“Arial”，
“右侧填充”：“5px”
},
“指南”：{
“线条样式”：“实心”，
“线条颜色”：“c7c9c9”，
“阿尔法”：0.2
}
},
“工具提示”：{
“可见”：错误
},
“crosshairX”：{
“线宽”：1，
“线条颜色”：“003849”，
“标记”：{
“大小”：4，
“类型”：“圆圈”，
“borderColor”：“fff”，
“边框宽度”：1
},
“刻度标签”：{
“字体颜色”：“#ffffff”，
“背景色”：“003849”，
“填充”：“5px 10px 5px 10px”，
“边界半径”：“5px”
},
//“打印标签”：{
//“多重”：假，
//“标注”：错误，
//“影子”：假，
//“高度”：“115px”，
//“填充”：“5px 10px 5px 10px”，
//“边界半径”：“5px”，
//“阿尔法”：1，
//“标题文本”：“节点%缩放键文本
”，
//“文本”：“%plot text:%node value”
//            }
},
“序列”：[//在此处插入序列数据。
{“文本”：“P1”，
“价值”：价值观，
“线条颜色”：“7ca82b”，
“线宽”：1
},
]
};
render（{//render方法[3]
id:'id\U图形\U框'，
数据：图表数据，
身高：400，
宽度：800，
});
zingchart.click=函数（p）{
log（“X:，p上的图形CLICKEND”）

完全公开，我是ZingChart团队的成员

是的，这些值是相对于图表位置的。您可以使用我们的API方法根据单击的xy位置获取所需的图表信息。您将使用，它将获取有关图表的一系列信息。它将获取最接近单击位置的比例信息。这意味着如果您在两个节点之间单击es（对于scale-x），以最接近的为准（单击后的x位置），它将为您提供该信息。在突出显示节点时，十字线/导向器的工作方式相同，因此这应该不是问题。我只是认为它与显示相关

下面的演示带有console.log（）输出，看起来有点怪。它也是我们托管的链接。

var值=[0,2.81,5.61,8.38]；
var图表数据={
“type”：“line”，//在此处指定图表类型。
“背景色”：“#F4”，
“scale-x”：{
“缩放”：正确
},
“情节”：{
//“模式”：“快速”，
“精确”：正确，
//“智能采样”：正确，
//“maxNodes”：0，
//“maxTrackers”：0，
“线宽”：2，
“影子”：假，
“标记”：{
“类型”：“无”，
“影子”：假
}
},
“绘图区域”：{
“背景色”：“#fbfb”，
“页边距顶部”：“30px”，
“保证金底部”：“40px”，
“左边距”：“50px”，
“右边距”：“30px”
},
“scaleX”：{
“自动拟合”：正确，
“缩放”：没错，
“正常化”：正确，
“线宽”：1，
“线条颜色”：“c7c9c9”，
“勾选”：{
“线宽”：1，
“线条颜色”：“#c7c9c9”
},
“指南”：{
“可见”：错误
},
“项目”：{
“字体颜色”：“#818181”，
“字体系列”：“Arial”，
“填充顶部”：“5px”
},
“最大标签”：10
},
“scrollX”：{}，
“scaleY”：{
“最小值”：“自动”，
“自动拟合”：正确，
“线宽”：1，
“线条颜色”：“c7c9c9”，
“勾选”：{
“线宽”：1，
“线条颜色”：“#c7c9c9”
},
“项目”：{
“字体颜色”：“#818181”，
“字体系列”：“Arial”，
“右侧填充”：“5px”
},
“指南”：{
“线条样式”：“实心”，
“线条颜色”：“c7c9c9”，
“阿尔法”：0.2
}
},
“工具提示”：{
“可见”：错误
},
“crosshairX”：