Zingchart - passaggio di una funzione al tooltip

È possibile passare una funzione al tasto tooltip nello Zingchart Json?Zingchart - passaggio di una funzione al tooltip

ho provato la seguente finora:

$scope.applyTooltip = function (timestamp) { 
    console.log(timestamp); 
    var tooltip = "<div>"; 
    var data = { 
    timestamp1: { 
     param1: "bla", 
     param2: "foo, 
    }, 
    ... 
    } 

    for(var param in data){ 
     console.log(param); 
     tooltip += param+": "+data[param]+"<br>"; 
    } 
    tooltop += "</div>; 

    return tooltip; 
    }  


$scope.graphoptions = { 
    //... 
    //just displaying the relevant options 

    plot: { 
     "html-mode": true, 
     tooltip: $scope.applyTooltip("%kt"), 
    } 
}

}

Ma la funzione ottiene la stringa "% kt" così com'è e non il ricercato X-Valore della trama è passato il mouse. Quindi, come è possibile passare il valore X nella funzione?

fonte

2016-05-04 GuyWithCookies

ZingChart non consente il passaggio di funzioni tramite l'oggetto di configurazione. Invece, esiste una proprietà chiamata "jsRule" che consente di passare al nome una funzione da valutare durante ogni evento del tooltip.

tooltip : { 
    jsRule : "CustomFn.formatTooltip()" 
}

Dentro quella funzione, un parametro sarà disponibile che conterrà informazioni sul nodo che si mouse su come value, scaletext, plotindex, nodeindex, graphid, e altro ancora. È sufficiente restituire un oggetto per il tooltip (incluso il testo formattato) e ZingChart si occuperà del resto. Esempio fornito di seguito.

L'avvertenza a jsRule è che il nome della funzione deve essere accessibile a livello globale poiché ZingChart non accetta le funzioni inline. Siamo a conoscenza di questo problema e stiamo pianificando che questa opzione sia un'opzione nelle versioni future.

CustomFn = {}; 
 

 
    var myConfig = { 
 
    \t type: "line", 
 
    \t tooltip : { 
 
    \t jsRule : "CustomFn.formatTooltip()" 
 
    \t }, 
 
    \t series : [ 
 
    \t \t { 
 
    \t \t \t values : [1,3,2,3,4,5,4,3,2,1,2,3,4,5,4] 
 
    \t \t }, 
 
    \t \t { 
 
    \t \t \t values : [6,7,8,7,6,7,8,9,8,7,8,7,8,9,8] 
 
    \t \t } 
 
    \t ] 
 
    }; 
 
    
 
    
 
    CustomFn.formatTooltip = function(p){ 
 
    var dataset = zingchart.exec('myChart', 'getdata'); 
 
    var series = dataset.graphset[p.graphindex].series; 
 
    
 
    var tooltipText = ""; 
 
    for (var i=0; i < series.length; i++) { 
 
     tooltipText += "Series " + i + " : " + series[i].values[p.nodeindex] + ""; 
 
     if (i !== series.length-1) { 
 
     tooltipText += "\n"; 
 
     } 
 
    } 
 
    return { 
 
     text : tooltipText, 
 
     backgroundColor : "#222" 
 
    } 
 
    } 
 

 
    zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= 'https://cdn.zingchart.com/2.3.1/zingchart.min.js'></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

fonte

2016-05-04 21:27:36

Zingchart - passaggio di una funzione al tooltip

risposta

Problemi correlati