如何使用Anychart向下鑽取圖表

我正在嘗試使用Anychart來開發向下鑽取功能。我找到了一個使用向下鑽取選項的鏈接，但文檔非常陳舊，無法在Anychart文檔中找到有關圖表的最新文檔。地圖向下鑽取可在官方的Anychart文檔中找到，但我需要向下鑽取功能。如何使用Anychart向下鑽取圖表

到目前爲止，我嘗試了下面的代碼來生成向下鑽取，但是在向下鑽取事件中我無法獲取數據或任何其他屬性形式的事件參數的值。

我試圖記錄e.data屬性，在那裏得到未定義。讓我知道我該如何實現這一點，或者可以指向Anychart中可用的文檔。

樣品的編號：

<html> 
<head> 
<script src="https://cdn.anychart.com/js/7.13.0/anychart-bundle.min.js"></script> 
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css"> 
<style> 
html, body, #container { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
</style> 
</head> 
<script type="text/javascript"> 
anychart.onDocumentReady(function() { 
     anychart.format.inputDateTimeFormat('MM.dd.yyyy hh:mm:ss'); 
     chart = anychart.fromJson({ 
      chart: { 
       type:'line', 
       xAxes: [{ 
        labels: { 
         textFormatter: formatter, 
         rotation: -40 
        }}], 
       scales: [{ type: 'dateTime' 
       }], 
       xScale: '0', 
       yScale: { 
        minimum: -1 
       }, 
       series: [ 
        { 
         seriesType: 'spline', 
         name: 'OCRTest', 
         connectMissingPoints:true, 
         tooltip: { 
          titleFormatter: tooltipFormatter, 
          textFormatter: textFormatterToolTip 
         }, 
         stroke: { 
          color: '#008000', 
          thickness: 2 
         }, 
         data:[ 
          {"x":"03.09.2017 12:01:24","value":0.8270}, 
          {"x":"03.09.2017 12:11:25","value":0.9520}, 
          {"x":"03.09.2017 12:21:25","value":0.9210}, 
          {"x":"03.09.2017 12:31:25","value":0.9200}, 
          {"x":"03.09.2017 12:41:23","value":0.2960}, 
          {"x":"03.09.2017 12:51:25","value":0.1410}, 
          {"x":"03.09.2017 01:01:23","value":0.7800}, 
          {"x":"03.09.2017 01:11:24","value":0.4210}, 
          {"x":"03.09.2017 01:21:25","value":0.0630}, 
          {"x":"03.09.2017 01:31:25","value":0.8420}, 
          {"x":"03.09.2017 01:41:25","value":0.7640}, 
          {"x":"03.09.2017 01:51:24","value":0.1870}, 
          {"x":"03.09.2017 02:01:28","value":0.1870}, 
          {"x":"03.09.2017 02:11:25","value":0.8270}, 
          {"x":"03.09.2017 02:21:24","value":0.7170}, 
          {"x":"03.09.2017 02:31:24","value":0.9200}, 
          {"x":"03.09.2017 02:41:27","value":0.4680}, 
          {"x":"03.09.2017 02:51:24","value":0.9360} 
         ]}], 
       'xScroller': { 
        'enabled': true, 
       }, 
       container:'container', 
       'tooltip': { 
        'title': { 
         'enabled': true, 
        }, 
        'displayMode': 'single', 
        'enabled': true 
       }} 
     }).draw(); 
     chart.addEventListener('pointClick', onPointClick); 
     var credits = chart.credits(); 
     credits.enabled(false); 
    }); 
    function tooltipFormatter(){ 
     return anychart.format.dateTime(this.x, 'MMM dd yyyy h:mm'); 
    } 
    function formatter(){ 
     return anychart.format.dateTime(this.tickValue, 'MMM dd yyyy h:mm'); 
    } 
    function textFormatterToolTip(){ 
     return this.seriesName + ': ' + this.value; 
    } 
    function onPointClick(e) 
    { 
     console.log(e.data); 
    } 

</script> 
<body> 
<div id="container"></div> 
</body> 
</html>

來源

2017-03-15 user3625533

使用addEventListener（）是不建議使用的方法，它是在6.x的版本中使用。請定義相應的監聽器來處理點事件：

chart.listen("pointClick", function(e){ 
     onPointClick(e); 
    });

我會根據您的數據的例子來說明這個想法： http://jsfiddle.net/e570c09j/

此外，關於如何創建向下鑽取圖表的更多信息，請在這裏找到： https://docs.anychart.com/Common_Settings/Interactivity#drilldown

在這裏你可以找到有關監聽器的詳細信息和支持的事件： https://docs.anychart.com/Common_Settings/Event_Listeners

看看下面的示例，它使用'pointSelect'偵聽器來創建交互式圖表： http://playground.anychart.com/docs/7.13.0/samples/CS_Interactivity_13-plain

來源

2017-03-15 22:36:41

如何使用Anychart向下鑽取圖表

回答

相關問題