टूलटिप्स में पूर्ण लेबल मान रखते हुए चार्टजेएस में कैनवास लेबल को छिड़काते हुए

Question

मेरे पास कुछ बार चार्ट हैं जिनमें वास्तव में लंबे लेबल हैं और वे चार्ट के आकार को प्रभावित करते हैं।

उदाहरण: http://jsfiddle.net/norbiu/aqa8w19d/4/

मैं लेबल है कि चार्ट के अंतर्गत दिखाई जबकि लेबल कि टूलटिप्स में दिखाई देता है जब एक बार पर मँडरा रखने काट-छांट करने की कोशिश कर रहा हूँ। समस्या यह है कि टूलटिप्स और कैनवास लेबल दोनों डेटा संरचना में labels सरणी से अपने मान प्राप्त करते हैं। मूल्य को छोटा करने से दोनों स्थानों में संक्षिप्त संस्करण दिखाई देगा।

sales: ko.observable({ 
    labels: ['A really really long label', 'Another long labe', 'A third label that is long', 'Q4', 'Q5', 'Q6'], 
    datasets: [{ 
     label: 'Helados', 
     fillColor: '#152491', 
     data: [70, 32, 6, 23, 63, 43] 
    }] 
}), 

प्रलेखन इस पर कुछ भी नहीं है। कोई विचार?

Answer 1

तो जिस तरह से मैं इस बारे में गया था उसे labelLength नामक एक नया विकल्प जोड़ना था, जो 0 से अधिक संख्या पारित करने पर, उस अक्ष पर एक्स अक्ष पर लेबल को ट्रिम कर देगा।

यह चार्ट के पैमाने वर्ग में होता है और केवल धुरी लेबल पर लागू होता है, न कि टूल टिप।

यदि आप चाहते थे कि आप प्रासंगिक बिट्स निकाल सकें और केवल स्केल क्लास को ओवरराइड कर सकें और नए विकल्प को शामिल करने के लिए बार चार्ट में बिल्ड स्केल फ़ंक्शन भी कर सकें।

पैमाने वर्ग यहाँ क्या बार buildscale समारोह आप पैमाने पर करने के विकल्प को पारित करने की आवश्यकता होगी में

Chart.Scale = Chart.Element.extend({ 
     initialize: function() { 
      //truncate the labels if option is grater than 0 
      this.xLabels = this.labelLength > 0 ? this.xLabels.map(this.truncateLabel, this) : this.xLabels; 
      this.fit(); 
     }, 
     truncateLabel: function(label) { 
      return label.substring(0, this.labelLength); 
     }, 

     addXLabel: function(label) { 
      //also added here for when adding single items of data to a graph 
      this.xLabels.push(this.labelLength > 0 ? this.truncateLabel(label) : label); 
      this.valuesCount++; 
      this.fit(); 
     }, 

}

जोड़ा गया है तो है।

या मैं चार्ट js की (https://github.com/leighquince/Chart.js) मेरी कांटा में यह भी शामिल है बस का उपयोग करने के अपने वांछित लेबल लंबाई के साथ विकल्प labelLength पास, नीचे

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100) 
 
}; 
 

 
var barChartData = { 
 
    labels: ["January a really long label", "February a really long label", "March a really long label", "April a really long label", "May a really long label", "June a really long label", "July a really long label"], 
 
    datasets: [{ 
 
    fillColor: "rgba(220,220,220,0.5)", 
 
    strokeColor: "rgba(220,220,220,0.8)", 
 
    highlightFill: "rgba(220,220,220,0.75)", 
 
    highlightStroke: "rgba(220,220,220,1)", 
 
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }, { 
 
    fillColor: "rgba(151,187,205,0.5)", 
 
    strokeColor: "rgba(151,187,205,0.8)", 
 
    highlightFill: "rgba(151,187,205,0.75)", 
 
    highlightStroke: "rgba(151,187,205,1)", 
 
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }, { 
 
    fillColor: "rgba(15,18,20,0.5)", 
 
    strokeColor: "rgba(15,18,20,0.8)", 
 
    highlightFill: "rgba(15,18,20,0.75)", 
 
    highlightStroke: "rgba(15,18,20,1)", 
 
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }] 
 

 
} 
 
window.onload = function() { 
 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 
    window.myBar = new Chart(ctx).Bar(barChartData, { 
 
    labelLength: 10, 
 
    }); 
 
}

<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script> 
 
<div style="width: 50%"> 
 
    <canvas id="canvas" height="450" width="600"></canvas> 
 
</div>

Answer 2

बस कुछ अतिरिक्त जानकारी उदाहरण (टिप्पणी नहीं कर सकता, लेकिन सोचा कि यह सहायक होगा) मैंने लेबल को छोटा कर दिया गया है या नहीं, यह दिखाने के लिए उपरोक्त उत्तर में कोड का एक छोटा सा कोड जोड़ा है।

truncateLabel: function(label) { 
    var xSubstring = label.substring(0, this.labelLength); 
    if(xSubstring.length < this.labelLength) { 
     return xSubstring; 
    } else { 
     // Check if a word is cut off 
     if (' ' != label.charAt((this.labelLength-1)) && ' ' != label.charAt(this.labelLength)) { 
      // If so, cut the label off at the last space instead of mid-word 
      var last_space_pos = label.lastIndexOf(" ", this.labelLength); 
      last_space_pos = (0 > last_space_pos)? this.labelLength: last_space_pos; 
      xSubstring = label.substring(0, last_space_pos); 
     } 
     return xSubstring+"..."; 
    } 
}, 

Answer 3

इस प्लगइन कोड को संशोधित करने customTooltips:function(tooltip) विकल्प के साथ here दस्तावेज के बिना प्राप्त किया जा सकता।
रेखा ग्राफ के लिए टूलटिप्स को संशोधित करने के लिए एक नमूना कोड here भी प्रदान किया जाता है। वांछित व्यवहार को प्राप्त करने के लिए उस स्निपेट का उपयोग करना काफी आसान है।
- कस्टम टूलटिप के लिए एक div बनाएँ।
- एक्स-अक्ष के लिए लेबल को छोटा करें लेकिन मैपिंग को सरणी में मूल पाठ में रखें।
- कस्टमटूलटिप फ़ंक्शन में, tooltip.text का उपयोग करके मैपिंग सरणी में कुंजी के रूप में टूलटिप div को मूल पाठ के साथ पॉप्युलेट करें।

Answer 4

चार्ट जेएस वी 2 में आप विकल्प ऑब्जेक्ट को पारित करने वाले लेबल को छोटा कर सकते हैं। इसके अलावा आप टूलटिप्स को कस्टमाइज़ कर सकते हैं।

options:{ 
    scales: { 
     xAxes: [{ 
      ticks: { 
       callback: function(value) { 
        return value.substr(0, 10);//truncate 
       }, 
      } 
     }], 
     yAxes: [{}] 
    }, 
    tooltips: { 
     enabled: true, 
     mode: 'label', 
     callbacks: { 
      title: function(tooltipItems, data) { 
       var idx = tooltipItems[0].index; 
       return 'Title:' + data.labels[idx];//do something with title 
      }, 
      label: function(tooltipItems, data) { 
       //var idx = tooltipItems.index; 
       //return data.labels[idx] + ' €'; 
       return tooltipItems.xLabel + ' €'; 
      } 
     } 
    }, 
}