ZingChartはクリック時に十字線の位置を取得します

Question

ZingChart clickイベントは、コールバックがオブジェクトを受け取ることを示します。 x属性は、私はこれが位置（左上隅からの相対ウィンドウのカーソル位置（ピクセル）であると仮定チャート位置

にクリックの相対

x位置が含まれています？）グラフを含むdiv要素の。十字が「0」である場合 はExample

が、私は時にその値を取得したいすなわち：映像に示すように

クリック時に十字位置の「X」の値を取得する方法はありますクリック。私は、クリックイベントの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を使用すると、チャートに関する一連の情報が得られます。クリックが発生した場所に最も近いスケール情報を取得します。つまり、2つのノード（スケール-x）の間をクリックすると、そのうちのどれに近いか（クリックからx位置）、その情報が得られます。十字線/ガイドは、ノードを強調表示するときと同じように機能するので、問題ではありません。私はちょうどそれが育つことに関係があると思った。

下記のデモは、console.log（）の出力ではちょっとファンキーです。 Hereは私たちによってもホストされているリンクです。

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({ 
 
\t id: 'myChart', 
 
\t data: chartData, 
 
\t height: '100%', 
 
\t 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 { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

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

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