Heute ist die neue Version 3.13 erschienen! Diese Version enthält 4 neue Funktionen, 2 Fehlerkorrekturen und Toolverbesserungen.

Detaillierte Veröffentlichungsinformationen finden Sie in den Versionshinweisen:
https://github.com/naver/billboard.js/releases/tag/3.13.0

Was ist neu?

Flächen-Schritt-Bereichsdiagramm

Bereichstypen sind nützlich, um „Bereichswerte“ ausgehend vom Basiswert zu visualisieren. Ab dieser Version wird der Variation ein neuer „Schritt“-Typ hinzugefügt.

Demo: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart

import bb, {areaStepRange} from "billboard";

bb.generate({
  data: {
    columns: [
     ["data1", [70, 40, 30],
     [155, 130, 115],
     [160, 135, 120],
     [200, 120, 110],
     [95, 50, 40],
     [199, 160, 125]
    ]],
    type: areaStepRange()
  }
});

Regionen rendern Verbesserungen

Um einen Bereich mit gestrichelten Linien darzustellen, wird die Option data.regions verwendet. Aber die Art und Weise, gestrichelte Linien zu rendern, musste durch die Kombination mehrerer Pfadbefehle erfolgen, da gestrichelte Linien so sein mussten.

Aus dem obigen Beispiel-Screenshot sind mehrere Pfadbefehle erforderlich, um gestrichelte Linien zu zeichnen.

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Dieser Ansatz verursachte einige Rendering-Probleme (#1, #2) und wir haben versucht, dies auf native Weise zu verbessern.

Anstatt gestrichelte Linien mit Pfadbefehlen zu zeichnen, sind wir dazu übergegangen, mithilfe der Stileigenschaft „Stroke-Dasharray“ zu rendern.

• Vorher: Pfadbefehl/ Nachher: ​​Stroke-Dasharray

Demo: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

Bei der Zoom-Interaktion wurde die Leistung der Animationsrahmen von 84 ms auf 5 ms verbessert!

Durch die Aktualisierung auf 3.12 profitieren Sie von den Vorteilen ohne Codeänderungen.

legend.format: Originaldaten-ID angeben
Wenn die Option „data.names“ angegeben ist, werden die Namen der Anzeigedaten von den ursprünglichen Namen (ID) abweichen.

{
  data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
    columns: [
       ["data1", 71.4],
       ["data2", 10]
    ]
  }
}

In diesem Fall erhält der Rückruf von legend.format den durch data.names ersetzten Wert anstelle der ursprünglichen ID.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id) {
       // id will be 'Detailed Name' and 'Name Detailed'
    }
}

Ab dieser Version wird der ursprüngliche „id“-Wert mit den ersetzten Namen bereitgestellt.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id, dataId) {
        // id will be 'Detailed Name' and 'Name Detailed'
        // dataId will be 'data1' and 'data2'
    }
}

Demo: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

bar.width Rückruf

Zuvor war es für bar.width möglich, einen absoluten Wert oder einen Verhältniswert anzugeben. „Absolut“ kann die Diagrammgröße nicht dynamisch widerspiegeln und das Verhältnis kann mit einer gewissen Einschränkung widerspiegeln.

Die Art und Weise, wie das Verhältnis berechnet wird, basiert auf der folgenden Gleichung.

x Axis tick Interval * ratio

Wenn das Diagramm beispielsweise eine Breite von 500 Pixeln hat und die Anzahl der Achsenstriche 5 beträgt, beträgt das Intervall ungefähr 100 Pixel.

Wenn in diesem Fall bar.ratio=0,5 angegeben ist, lautet die Gleichung wie folgt und die Breite des Balkens beträgt 49,9 Pixel.

100(exact value is 99.8) * 0.5 = 49.9

Um mehr Kontrolle über die Anpassung des Breitenwerts der Leiste zu geben, wird die Option „bar.width“ erweitert, um eine Rückruffunktion mit praktischen Parametern zu akzeptieren.

Demo: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: {
    width: function(width, targetsNum, maxDataCount) {
         // - width: chart area width
         // - targetsNum: number of targets
         // - maxDataCount: maximum data count among targets
   }
}

Noch etwas: Update zum Test-Framework

Wir haben Karma Mocha für unser Test-Framework verwendet und es war eine großartige Erfahrung, billboard.js stabil zu halten.

Leider hat Karma die Einstellung angekündigt und wir mussten einige andere moderne Test-Frameworks migrieren, um die Bibliothek stabil zu halten und dem modernen Ökosystem zu folgen.

Nach einiger Recherche haben wir uns entschieden, zu vitest zu wechseln. Wir haben die Migration innerhalb dieser Version erfolgreich durchgeführt und die lokalen Tests wurden um bis zu 63 % verbessert!

Formular für weitere Details, Kasse https://github.com/naver/billboard.js/pull/3866

Schließen

Das ist alles, was wir für diese Veröffentlichung haben. Bleiben Sie dran!