2017-12-14 3 views
1

Ich habe eine 3D-gestapelte Säulendiagramm. Wenn in den Daten größere Werte vorhanden sind, werden die kleinen Werte nicht im Diagramm angezeigt. Wie Sie sehen inhighcharts, Mindesthöhe für gestapelte Säulendiagramm festlegen?

http://jsfiddle.net/43pv1a2q/6/

series: [{ 
     name: 'John', 
     data: [500, 3, 4, 7, 2], //If change 500 to 5, all blocks will be shown 
     stack: 'male' 
    }, { 
     name: 'Joe', 
     data: [300, 4, 4, 2, 5], //change 300 to 3 
     stack: 'male' 
    }, 

    { 
     name: 'Tom', 
     data: [500, 3, 4, 7, 2], // change 500 to 5 
     stack: 'male' 
    }] 

Die minPointLength mit Balkendiagramm funktioniert, aber nicht mit gestapelten Säulendiagramm.

Wie legen Sie eine Mindesthöhe für den Block in einer gestapelten Spalte fest?

Antwort

0

könnte die Lösung sein, um die y-Achse eingestellt Typ: logarithmisch, wie so: Ich habe http://jsfiddle.net/43pv1a2q/8/

yAxis: { 
    type: 'logarithmic', 
    allowDecimals: false, 
    title: { 
     text: 'Number of fruits', 
     skew3d: true 
    } 
}, 

Die einzige Änderung habe, ist „Typ:‚logarithmische‘und entfernt“ einzustellen min : 0 ". Ich kann mir keinen anderen Weg vorstellen, um das zu erreichen, was man sucht, wenn man mit so unterschiedlichen Zahlen arbeitet.

EDIT: Natürlich können Sie immer noch" min: X "verwenden, um das Minimum einzustellen Wert auf der Y-Achse, ich habe es nur entfernt, weil es unnötig war, wenn ich Minimum zum Standard haben wollte.

1

Es scheint ein Fehler zu sein. Sie können es hier melden: https://github.com/highcharts/highcharts/issues

Umgehung:

ich jeden Punkt aktualisieren, um einen neuen Wert zu verwenden, wenn sein ursprünglicher y Wert kleiner als 50 (Schwelle) und den ursprünglichen Wert in realValue Eigenschaft speichern. Dann berechnen ich manuell die kumulierten Werte für jeden Stapel in tooltip.pointFormatter so dass der Betrachter richtigen Werte sieht:

events: { 
    load: function() { 

    var chart = this, 
     minColHeightVal = 50; 

    chart.series.forEach(function(s) { 
     s.points.forEach(function(p) { 

     if (p.y < minColHeightVal) { 
      p.update({ 
      y: minColHeightVal, 
      realValue: p.y 
      }, false); 
     } 
     }); 
    }); 

    chart.redraw(); 

    } 
} 

// (...) 

pointFormatter: function() { 
    var stackSum = 0, 
    point = this, 
    chart = point.series.chart; 

    chart.series.forEach(function(s) { 
    s.points.forEach(function(p) { 
     if (p.x === point.x) { 
     stackSum += p.realValue ? p.realValue : p.y 
     } 
    }); 
    }); 

    return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': ' + (point.realValue ? point.realValue : point.y) + '/' + stackSum; 

} 

Live-Demo:http://jsfiddle.net/kkulig/j3toufk9/

Verwandte Themen