चार्टजेएस - महीने के आधार पर लेबल के साथ चार्ट बनाएं,

Question

द्वारा डेटा मैं दिन के साथ डेटा के साथ Chartjs द्वारा लाइन चार्ट आकर्षित करना चाहता हूं, लेकिन महीने के आधार पर लेबल करना चाहता हूं।

यदि लेबल दिन के अनुसार प्रदर्शित होता है, तो बहुत सारे अंक हैं। तो, मैं दिन के बजाय महीने के आधार पर लेबल प्रदर्शित करना चाहता हूं। उदाहरण के लिए:

किसी ने मुझे सिखाने कैसे करने के लिए कर सकता है?

धन्यवाद।

Answer 1

labels सरणी और data सरणी से मेल खाना पड़ेगा। इसलिए है कि आप क्या करने की आवश्यकता होगी अपने मूल्यों की गणना डेटा सरणी में पकड़ में अपने लेबल

data: { 
    labels: ["Jan", "Feb", "March", ...], 
    datasets: [{ 
     label: '# of Votes', 
     data: [01, 02, 03, ...], 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)', 
      ... 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)', 
      ... 
     ], 
     borderWidth: 1 
    }] 
}, 

कि अपने संदेह का समाधान करता है मिलान करने के लिए हो रहा है?

Answer 2

यह प्रश्न अब काफी पुराना है, लेकिन मुझे afterTickToLabelConversion कार्यशीलता का उपयोग करके एक समाधान मिला है। मैंने तिथि स्वरूपित की, और हर महीने केवल एक लेबल छोड़ दिया (शेष लेबल खाली उद्धरण में परिवर्तित हो गए हैं)।

scales: { 
     xAxes: [{ 
      type: 'time', 
      position: 'bottom', 
      time: { 
       displayFormats: { 
        'day': 'MM/YY' 
       }, 
       tooltipFormat: 'DD/MM/YY', 
       unit: 'day', 
      }, 
      // leave only one label per month 
      afterTickToLabelConversion: function (data) { 
       var xLabels = data.ticks; 
       var oldLabel = ""; 
       xLabels.forEach(function (labels, i) { 
        if(xLabels[i] == oldLabel){ 
         xLabels[i] = ""; 
        } else { 
         oldLabel = xLabels[i]; 
        } 
       }); 
      } 
     }] 
    } 

Answer 3

बस विन्यास अपने xAxes-> समय संपत्ति के रूप में:
इकाई: 'माह'

xAxes: [{ 
 
    type: 'time', 
 
    position: 'bottom', 
 
    time: { 
 
    displayFormats: {'day': 'MM/YY'}, 
 
    tooltipFormat: 'DD/MM/YY', 
 
    unit: 'month', 
 
    } 
 
}],