จำกัด จำนวนป้ายกำกับบนแผนภูมิเส้น Chart.js

ฉันต้องการแสดงจุดทั้งหมดในแผนภูมิของฉันจากข้อมูลที่ฉันได้รับ แต่ฉันไม่ต้องการแสดงป้ายกำกับทั้งหมดสำหรับพวกเขาเนื่องจากแผนภูมินั้นอ่านไม่ได้มากนัก ฉันกำลังมองหาในเอกสาร แต่ไม่พบพารามิเตอร์ใด ๆ ที่จะ จำกัด สิ่งนี้

ฉันไม่ต้องการใช้เพียงสามป้ายเนื่องจากแผนภูมิถูก จำกัด ไว้ที่สามจุด เป็นไปได้ไหม?

ฉันมีบางอย่างในขณะนี้:

ถ้าฉันสามารถออกทุกๆสามในสี่ป้ายก็จะดีมาก แต่ฉันไม่พบอะไรเลยเกี่ยวกับตัวเลือกป้ายกำกับ

ลองเพิ่มoptions.scales.xAxes.ticks.maxTicksLimitตัวเลือก:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

เพื่อความเป็นรูปธรรมสมมติว่ารายการป้ายกำกับเดิมของคุณมีลักษณะดังนี้:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

หากคุณต้องการแสดงทุกป้ายกำกับที่ 4 เท่านั้นให้กรองรายการป้ายกำกับของคุณเพื่อให้ทุกป้ายกำกับที่ 4 ถูกเติมและอื่น ๆ ทั้งหมดเป็นสตริงว่าง (เช่น["0", "", "", "", "4", "", "", "", "8"])

สำหรับใครก็ตามที่ต้องการบรรลุสิ่งนี้ในแผนภูมิ JS V2 สิ่งต่อไปนี้จะใช้งานได้:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

จากนั้นส่งตัวแปรตัวเลือกตามปกติไปยัง:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

อัพเดท:

ฉันได้อัปเดตทางแยกของฉันด้วยการดึงล่าสุด (ณ วันที่ 27 มกราคม 2014) จากสาขาหลัก Chart.js ของ NNick https://github.com/hay-wire/Chart.js/tree/showXLabels

คำตอบเดิม:

สำหรับผู้ที่ยังคงประสบปัญหานี้ฉันก็แยก Chart.js สักพักเพื่อแก้ปัญหาเดิม สามารถตรวจสอบได้ที่: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => สาขาเก่า! ตรวจสอบสาขา showXLabels เพื่อดึงล่าสุด

วิธีใช้:

ใช้ได้กับแผนภูมิแท่งและแผนภูมิเส้น

ผู้ใช้สามารถส่งไฟล์ { showXLabels: 10 }เพื่อแสดงป้ายกำกับได้เพียง 10 ป้าย (จำนวนป้ายกำกับที่แสดงจริงอาจแตกต่างกันเล็กน้อยขึ้นอยู่กับจำนวนป้ายกำกับทั้งหมดที่แสดงบนแกน x แต่จะยังคงใกล้เคียงกับ 10 ป้ายอย่างไรก็ตาม)

ช่วยได้มากเมื่อมีข้อมูลจำนวนมาก ก่อนหน้านี้กราฟเคยดูเสียหายเนื่องจากป้ายแกน x ลากทับกันในพื้นที่คับแคบ ด้วยshowXLabelsตอนนี้ผู้ใช้สามารถควบคุมเพื่อลดจำนวนป้ายกำกับให้เหลือจำนวนป้ายกำกับที่เหมาะสมกับพื้นที่ที่มีอยู่

ดูภาพที่แนบมาเพื่อเปรียบเทียบ

ไม่มีshowXLabelsตัวเลือก:

ด้วย{ showXLabels: 10 }ตัวเลือกที่ส่งผ่าน:

นี่คือการอภิปรายบางส่วน: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

สำหรับการหมุนแกน

ใช้สิ่งนี้:

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }

ตามที่chart.js GitHub ปัญหา # โซลูชันปัจจุบัน ได้แก่ :

1. ใช้ 2.0 alpha (ไม่ใช่การผลิต)
2. ซ่อนแกน x เลยเมื่อมันแออัดเกินไป (รับไม่ได้เลย)
3. ควบคุมการข้ามป้ายกำกับของแกน x ด้วยตนเอง (ไม่ใช่ในหน้าที่ตอบสนอง)

อย่างไรก็ตามหลังจากนั้นไม่กี่นาทีฉันคิดว่ามีทางออกที่ดีกว่า

ตัวอย่างต่อไปนี้จะซ่อนป้ายโดยอัตโนมัติ โดยแก้ไขxLabelsด้วยสตริงว่างก่อนเรียกใช้draw()และเรียกคืนหลังจากนั้น ยิ่งไปกว่านั้นสามารถใช้ป้ายกำกับ x หมุนซ้ำได้เนื่องจากมีพื้นที่มากขึ้นหลังจากซ่อน

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

โปรดสังเกตว่าcloneเป็นการพึ่งพาภายนอก

ฉันมีประเภทของปัญหาที่คล้ายกันและได้รับการแก้ปัญหาที่ดีที่จะเฉพาะปัญหาของฉันฉลากแสดงในเคล็ดลับ แต่ไม่ได้อยู่ในแกน x สำหรับแผนภูมิ ดูว่าสิ่งนี้ช่วยคุณได้หรือไม่

คำตอบนี้งานได้เหมือนมีเสน่ห์

หากคุณสงสัยเกี่ยวกับcloneฟังก์ชันนี้ให้ลองใช้ฟังก์ชันนี้:

var clone = function(el){ return el.slice(0); }

ในไฟล์ Chart.js คุณควรพบ (ในบรรทัด 884 สำหรับฉัน)

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

หากคุณเพียงแค่ห่อที่โทรสายหนึ่งไปfillTextด้วย if ( i % config.xFreq === 0){ ... } และจากนั้นในchart.Line.defaultsการเพิ่มสิ่งที่สายxFreq : 1คุณควรจะสามารถที่จะเริ่มใช้xFreqในของคุณเมื่อคุณโทรoptionsnew Chart(ctx).Line(data, options)

โปรดทราบว่านี่เป็นเรื่องที่น่าสนใจทีเดียว