ज़िंगचर्ट - टूलटिप

पर फ़ंक्शन पास करना ज़िंगचार्ट जेसन में टूलटिप कुंजी पर फ़ंक्शन पास करना संभव है?ज़िंगचर्ट - टूलटिप

मैं अब तक निम्नलिखित की कोशिश की:

$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"), 
    } 
}

}

लेकिन समारोह स्ट्रिंग "% kt" हो जाता है के रूप में यह है और न आगे पीछे करता प्लॉट का वांछित एक्स-मान। तो फंक्शन में एक्स-वैल्यू को पास करना कैसे संभव है?

स्रोत

2016-05-04 GuyWithCookies

ज़िंगचर्ट कॉन्फ़िगरेशन ऑब्जेक्ट के माध्यम से फ़ंक्शंस में गुजरने की अनुमति नहीं देता है। इसके बजाय, "jsRule" नामक एक संपत्ति है जो आपको प्रत्येक टूलटिप ईवेंट के दौरान मूल्यांकन करने के लिए फ़ंक्शन नाम देने की अनुमति देती है।

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

कि समारोह के अंदर, एक पैरामीटर उपलब्ध हो जाएगा कि नोड आप पर moused बारे में जानकारी होगी जैसे value, scaletext, plotindex, nodeindex, graphid, और अधिक। बस टूलटिप (फ़ॉर्मेटेड टेक्स्ट समेत) के लिए ऑब्जेक्ट लौटाएं और ज़िंग चार्ट बाकी की देखभाल करेगा। नीचे दिया गया उदाहरण।

jsRule पर एक चेतावनी यह है कि फ़िंग नाम को विश्व स्तर पर पहुंचाना होगा क्योंकि ज़िंगचर्ट इनलाइन फ़ंक्शंस स्वीकार नहीं करता है। हम इस मुद्दे से अवगत हैं और भविष्य के संस्करणों में यह विकल्प बनने की योजना बना रहे हैं।

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>

स्रोत

2016-05-04 21:27:36

ज़िंगचर्ट - टूलटिप

उत्तर

संबंधित मुद्दे