क्या हाईचार्ट्स लेजेंड (रंग मार्कर नहीं) में छिपे हुए सीरी के केवल शीर्षक को ग्रे करना संभव है? 1000 शब्दों के लायक चित्र।

Default behavior What I want

2
DuFuS 18 सितंबर 2018, 00:09

2 जवाब

सबसे बढ़िया उत्तर

एक विकल्प के रूप में, Legend.colorizeItem का एक रैपिंग, जो लेजेंड आइटम legendLine और legendSymbol के बाद छिपे हुए रंग की सेटिंग को "पूर्ववत" करने के लिए पोस्ट-प्रोसेस करता है:

(function (H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        if(item.legendLine) {
            item.legendLine.attr({ stroke: item.color });
        }
        if(item.legendSymbol) {
            if ((item.options && item.options.marker) && item.legendSymbol.isMarker)
                item.legendSymbol.attr(item.pointAttribs());
            else
                item.legendSymbol.attr({ fill: item.color });
        }
    });
}(Highcharts));

item.LegendSymbol के लिए विस्तृत कोड सेट किए जा सकने वाले किसी भी मार्कर विकल्प को संरक्षित करना है। यह visible की सच्चाई पर विचार किए बिना colorizeItem के डिफ़ॉल्ट व्यवहार की नकल करता है।

इसका उपयोग में यह JSFiddle प्रदर्शन देखें।

3
Halvor Holsten Strand 18 सितंबर 2018, 12:00

आप अपने वांछित प्रभाव को प्राप्त करने के लिए लेजेंड को स्टाइल करने के लिए सीएसएस लागू कर सकते हैं।

विशेष रूप से, highcharts-legend-item-hidden वर्ग का लाभ उठाएं जो प्रत्येक लीजेंड आइटम पर जुड़ जाता है (अर्थात श्रृंखला को छिपाने के लिए उस पर क्लिक करने के बाद) मार्कर के रंग को उसी रंग में रहने के लिए मजबूर करने के लिए।

उदाहरण के लिए, यह सुनिश्चित करने के लिए कि पहली डेटा श्रृंखला का लेजेंड मार्कर हमेशा #ff6600 के रूप में रहता है:

.highcharts-series-0.highcharts-legend-item-hidden .highcharts-graph {
    stroke: #ff6600;
}
.highcharts-series-0.highcharts-legend-item-hidden .highcharts-point {
    fill: #ff6600;
}

यहाँ एक प्रदर्शन है।

3
miqh 18 सितंबर 2018, 03:56