चार्ट जेएस लाइन चार्ट के लिए एक्स-एक्सिस पर लेबल अभिविन्यास बदलें

Question

मैं chart.js का उपयोग कर रहा हूं।

this Question के समान, मैं अपने एक्स-अक्ष लेबल 90 डिग्री घुमाएगा। वर्तमान में मेरे लेबल डिफ़ॉल्ट सेटिंग्स के साथ 80 डिग्री घूर्णन कर रहे हैं।

किसी ने मुझसे, लेबल घूर्णन के लिए बार-चार्ट समाधान अनुकूलित इतना है कि मैं लाइन चार्ट पर उपयोग कर सकते हैं मदद कर सकता है?

Answer 1

पिछले उत्तर के समान विधि का उपयोग करना केवल एक चीज जिसे बदलने की जरूरत है वह ग्राफ प्रकार का विस्तार है। इस बार यह लाइन चार्ट का विस्तार कर रहा है और सेट-अप थोड़ा अलग है क्योंकि लाइन चार्ट स्केल बिल्ड स्केल में बनाया गया है, इसलिए इस बार यह buildScale ओवरराइड है ताकि कस्टम स्केल का उपयोग किया जा सके और नया विकल्प overrideRotation हो सकता है पास किया गया। initialize भी ओवरराइड किया गया है, लेकिन केवल इतना ही है कि सुपर प्रारंभिक को ग्राफ़ बनाने पर गेंद को घुमाया जा सकता है।

var helpers = Chart.helpers; 
 
Chart.MyScale = Chart.Scale.extend({ 
 
    calculateXLabelRotation: function() { 
 
    //Get the width of each grid by calculating the difference 
 
    //between x offsets between 0 and 1. 
 

 
    this.ctx.font = this.font; 
 

 
    var firstWidth = this.ctx.measureText(this.xLabels[0]).width, 
 
     lastWidth = this.ctx.measureText(this.xLabels[this.xLabels.length - 1]).width, 
 
     firstRotated, 
 
     lastRotated; 
 

 

 
    this.xScalePaddingRight = lastWidth/2 + 3; 
 
    this.xScalePaddingLeft = (firstWidth/2 > this.yLabelWidth + 10) ? firstWidth/2 : this.yLabelWidth + 10; 
 

 
    this.xLabelRotation = 0; 
 
    if (this.display) { 
 
     var originalLabelWidth = helpers.longestText(this.ctx, this.font, this.xLabels), 
 
     cosRotation, 
 
     firstRotatedWidth; 
 
     this.xLabelWidth = originalLabelWidth; 
 
     //Allow 3 pixels x2 padding either side for label readability 
 
     var xGridWidth = Math.floor(this.calculateX(1) - this.calculateX(0)) - 6; 
 

 
     if (this.overrideRotation) { 
 
     this.xLabelRotation = this.overrideRotation; 
 
     cosRotation = Math.cos(helpers.radians(this.xLabelRotation)); 
 
     // We're right aligning the text now. 
 
     if (firstRotated + this.fontSize/2 > this.yLabelWidth + 8) { 
 
      this.xScalePaddingLeft = firstRotated + this.fontSize/2; 
 
     } 
 
     this.xScalePaddingRight = this.fontSize/2; 
 
     this.xLabelWidth = cosRotation * originalLabelWidth; 
 
     } else { 
 
     //Max label rotate should be 90 - also act as a loop counter 
 
     while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)) { 
 
      cosRotation = Math.cos(helpers.radians(this.xLabelRotation)); 
 

 
      firstRotated = cosRotation * firstWidth; 
 
      lastRotated = cosRotation * lastWidth; 
 

 
      // We're right aligning the text now. 
 
      if (firstRotated + this.fontSize/2 > this.yLabelWidth + 8) { 
 
      this.xScalePaddingLeft = firstRotated + this.fontSize/2; 
 
      } 
 
      this.xScalePaddingRight = this.fontSize/2; 
 

 

 
      this.xLabelRotation++; 
 
      this.xLabelWidth = cosRotation * originalLabelWidth; 
 

 
     } 
 
     } 
 
     if (this.xLabelRotation > 0) { 
 
     this.endPoint -= Math.sin(helpers.radians(this.xLabelRotation)) * originalLabelWidth + 3; 
 
     } 
 
    } else { 
 
     this.xLabelWidth = 0; 
 
     this.xScalePaddingRight = this.padding; 
 
     this.xScalePaddingLeft = this.padding; 
 
    } 
 

 
    }, 
 

 
}); 
 

 
Chart.types.Line.extend({ 
 
    name: "MyLine", 
 
    initialize: function(data) { 
 
    Chart.types.Line.prototype.initialize.apply(this, arguments); 
 
    }, 
 

 
    buildScale: function(labels) { 
 
    var self = this; 
 

 
    var dataTotal = function() { 
 
     var values = []; 
 
     self.eachPoints(function(point) { 
 
     values.push(point.value); 
 
     }); 
 

 
     return values; 
 
    }; 
 

 
    var scaleOptions = { 
 
     templateString: this.options.scaleLabel, 
 
     height: this.chart.height, 
 
     width: this.chart.width, 
 
     ctx: this.chart.ctx, 
 
     textColor: this.options.scaleFontColor, 
 
     offsetGridLines: this.options.offsetGridLines, 
 
     fontSize: this.options.scaleFontSize, 
 
     fontStyle: this.options.scaleFontStyle, 
 
     fontFamily: this.options.scaleFontFamily, 
 
     valuesCount: labels.length, 
 
     beginAtZero: this.options.scaleBeginAtZero, 
 
     integersOnly: this.options.scaleIntegersOnly, 
 
     calculateYRange: function(currentHeight) { 
 
     var updatedRanges = helpers.calculateScaleRange(
 
      dataTotal(), 
 
      currentHeight, 
 
      this.fontSize, 
 
      this.beginAtZero, 
 
      this.integersOnly 
 
     ); 
 
     helpers.extend(this, updatedRanges); 
 
     }, 
 
     xLabels: labels, 
 
     font: helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily), 
 
     lineWidth: this.options.scaleLineWidth, 
 
     lineColor: this.options.scaleLineColor, 
 
     showHorizontalLines: this.options.scaleShowHorizontalLines, 
 
     showVerticalLines: this.options.scaleShowVerticalLines, 
 
     gridLineWidth: (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0, 
 
     gridLineColor: (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)", 
 
     padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth, 
 
     showLabels: this.options.scaleShowLabels, 
 
     display: this.options.showScale, 
 
     overrideRotation: this.options.overrideRotation, 
 
    }; 
 

 
    if (this.options.scaleOverride) { 
 
     helpers.extend(scaleOptions, { 
 
     calculateYRange: helpers.noop, 
 
     steps: this.options.scaleSteps, 
 
     stepValue: this.options.scaleStepWidth, 
 
     min: this.options.scaleStartValue, 
 
     max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth) 
 
     }); 
 
    } 
 

 

 
    this.scale = new Chart.MyScale(scaleOptions); 
 
    }, 
 
}); 
 

 

 

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

 
var barChartData = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
    fillColor: "rgba(20,20,220,0.2)", 
 
    strokeColor: "rgba(20,20,220,1)", 
 
    pointColor: "rgba(20,20,220,1)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(20,20,220,1)", 
 
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }, { 
 
    fillColor: "rgba(120,120,120,0.2)", 
 
    strokeColor: "rgba(120,220,120,1)", 
 
    pointColor: "rgba(120,120,120,1)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(120,120,120,1)", 
 
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }, { 
 
    fillColor: "rgba(220,220,220,0.2)", 
 
    strokeColor: "rgba(220,220,220,1)", 
 
    pointColor: "rgba(220,220,220,1)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(220,220,220,1)", 
 
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }] 
 

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

<script src="http://www.chartjs.org/assets/Chart.min.js"></script> 
 

 
<canvas id="canvas" height="150" width="300"></canvas>

Answer 2

यहाँ एक से थोड़ा अधिक hackier संस्करण है (Quince का जवाब बेहतर है - अगर Chart.js के भविष्य के कार्यान्वयन calculateXLabelRotation करता है अलग ढंग से निम्नलिखित टूट सकता है)

लेबल रोटेशन गणना की जाती है धीरे-धीरे लेबल को घूर्णन करके ताकि वे ऊर्ध्वाधर ग्रिड लाइनों के बीच फिट हो जाएं - उनके बीच की जगह scale.calculateX(1) - scale.calculateX(0) का उपयोग करके गणना की जाती है। हम (scale.calculateX वापसी एक ही मूल्य बनाकर) 0 होने के लिए इस गणना का परिणाम मजबूर करने के लिए सही समय की स्थिति में कूद - इस मोड़ में रोटेशन बलों यह अधिकतम (यानी 90 डिग्री) है को

पूर्वावलोकन प्रगति के लिए

---

स्क्रिप्ट

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function() { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 

     var scale = this.scale; 
     var originalCalculateXLabelRotation = scale.calculateXLabelRotation; 
     var originalXScalePaddingLeft = scale.xScalePaddingLeft; 
     scale.calculateXLabelRotation = function() { 
      var originalCalculateX = scale.calculateX; 
      scale.calculateX = function() { 
       return 0; 
      } 
      originalCalculateXLabelRotation.apply(this, arguments); 
      scale.xScalePaddingLeft = originalXScalePaddingLeft; 
      scale.calculateX = originalCalculateX; 
     } 
     this.scale.fit(); 
    } 
}); 

,210

और फिर

... 
new Chart(ctx).LineAlt(data); 

---

फिडल - http://jsfiddle.net/gc5gdg7e/

Answer 3

आप chart.js 2.x का उपयोग कर रहे हैं, तो सिर्फ सेट maxRotation: 90 और minRotation: 90 में टिक्स विकल्प। इससे मेरा काम बनता है! और यदि आप सभी एक्स-लेबल्स चाहते हैं, तो आप autoSkip: false सेट करना चाहेंगे। निम्नलिखित एक उदाहरण है।

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: chartData, 
    options: { 
     scales: { 
      xAxes: [{ 
       ticks: { 
        autoSkip: false, 
        maxRotation: 90, 
        minRotation: 90 
       } 
      }] 
     } 
    } 
});