चार्ट.जेएस: किंवदंती

Question

पर क्लिक करके श्रृंखला छुपाएं मैं चार्ट.जेएस (www.chartjs.org) का उपयोग करने वाली साइट विकसित कर रहा हूं।

मुझे एक लाइन चार्ट बनाना है जो डेटा की कई श्रृंखला दिखाता है, जो उपयोगकर्ता संबंधित किंवदंती प्रतीक (इस http://js.syncfusion.com/demos/web/#!/azure/chart/linechart के समान) पर क्लिक करके छुपा या दिखा सकते हैं।

क्या चार्टज के साथ ऐसा करने का कोई तरीका है?

Answer 1

मुझे ऐसा करने का कोई तरीका नहीं मिला है। किंवदंती टेम्पलेट पर कुछ ऑनक्लिक व्यवहार डालना आसान है, और आप आसानी से श्रृंखला स्ट्रोक और रंग अल्फा चैनल को 0 में बदल सकते हैं ताकि क्षेत्र और स्ट्रोक गायब हो जाए लेकिन मुझे अंक पर ऐसा करने का कोई तरीका नहीं मिला है।

मैंने इस विशेष चार्ट के लिए Google चार्ट का उपयोग करने का निर्णय लिया है, और जब भी मुझे उस व्यवहार की आवश्यकता नहीं है, तो चार्ट.जेएस को उम्मीद है कि चार्ट.जे के अच्छे निर्माता भविष्य में इसे जोड़ देंगे।

Answer 2

आप कोशिश कर सकते हैं इस
छिपा डेटासेट

window.chartName = new Chart(... 

window.chartName.store = new Array(); 

के लिए स्टोर बनाएँ तो चार्ट अद्यतन करने के लिए इस सुविधा का उपयोग, कथा आइटम पर क्लिक करके नियंत्रित किया जाना चाहिए

function updateDataset(legendLi, chart, label) { 
     var store = chart.store; 
     var exists = false; 
     for (var i = 0; i < store.length; i++) { 
     if (store[i][0] === label) { 
      exists = true; 
      chart.datasets.push(store.splice(i, 1)[0][1]); 
      legendLi.fadeTo("slow", 1); 
     } 
     } 
     if (!exists) { 
     for (var i = 0; i < chart.datasets.length; i++) { 
      if (chart.datasets[i].label === label) { 
      chart.store.push([label, chart.datasets.splice(i, 1)[0]]); 
      legendLi.fadeTo("slow", 0.33); 
      } 
     } 
     } 
     chart.update(); 
    } 

अद्यतन मत भूलना चार्ट विकल्पों में किंवदंती टेम्पलेट

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 

शीघ्र ही, मैं इस onclick हैंडलर ली घटक

<li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName , '<%=datasets[i].label%>')\">< 

के लिए उदाहरण fiddle के लिए जोड़ा

Answer 3

onLegendClick: function (e) { 
var series = e.target; 
       series.isVisible() ? series.hide() : series.show(); 
      }, 

dxcharts एक समारोह onLegendClick कहा जाता है, कुछ अन्य लोगों onSeriesClick और onPointClick हैं। आशा है कि ये आपकी मदद करेगा।

Answer 4

यह प्रलेखन http://www.chartjs.org/docs/#chart-configuration-legend-configuration

लीजेंड विन्यास

कथा विन्यास options.legend नाम स्थान में पारित हो जाता से अब Charts.js

में उपलब्ध है। चार्ट किंवदंती के लिए वैश्विक विकल्प चार्ट.defaults.global.legend में परिभाषित किए गए हैं।

onClick समारोह (घटना, legendItem) {} एक कॉलबैक है कि जब एक 'क्लिक' कहा जाता है घटना एक लेबल आइटम

onhover समारोह (घटना, legendItem) के शीर्ष पर पंजीकृत है {} एक कॉलबैक कहलाता है जब एक लेबल आइटम