Installation

Sixtyfold-Pakete sind ESM-only und werden unter dem npm-Scope @sixtyfold veröffentlicht. Die Browser-Runtimes Core, Line und Stock haben keine Laufzeitabhängigkeiten von Drittanbietern; Line und Stock hängen nur von Core ab. Framework-Adapter deklarieren das Host-Framework als Peer-Dependency, SSR verwendet eine vom Anwendung bereitgestellte Canvas2D-Implementierung, und das optionale MCP-Entwicklertool läuft als separater lokaler Prozess.

Paketindex

pnpm add @sixtyfold/line@next

npm install @sixtyfold/stock@next

Fügen Sie optionale Pakete nur bei Bedarf hinzu:

pnpm add @sixtyfold/themes@next @sixtyfold/ssr@next

Framework-Adapter sind separate Pakete. Installieren Sie einen Adapter und nur die Chart-Engine, die von dieser Anwendung verwendet wird:

# React line chart — stock is not installed
pnpm add @sixtyfold/react@next @sixtyfold/line@next

# Vue stock chart — line is not installed
pnpm add @sixtyfold/vue@next @sixtyfold/stock@next

Dasselbe Muster ist über @sixtyfold/angular, @sixtyfold/svelte und @sixtyfold/solid verfügbar. Importieren Sie deren /line oder /stock Einstiegspunkt. Siehe Framework adapters für Lifecycle-, SSR- und Typed-Array-Beispiele.

Optionales MCP-Entwicklertool

@sixtyfold/mcp ist ein separater lokaler Prozess für AI-Coding-Tools. Er kann die exakt versionierte API inspizieren, den kleinstmöglichen Paketsatz empfehlen, Framework-Integrationen generieren, Chart-Optionen prüfen und bei der Diagnose von Rendering- oder Leistungsproblemen helfen.

{
  "mcpServers": {
    "sixtyfold": {
      "command": "npx",
      "args": ["-y", "@sixtyfold/mcp@next"]
    }
  }
}

Es ist keine Chart-Abhängigkeit, gelangt nicht in das Browser-Bundle und ist nicht erforderlich, um Sixtyfold zu verwenden. Siehe MCP server für das vollständige Tool-, Datenschutz- und Verifikations-Referenz.

Minimales Liniendiagramm

Geben Sie dem Canvas eine konkrete CSS-Größe. Sixtyfold beobachtet das Element und bestimmt die Backing-Store-Größe mit dem aktiven Device-Pixel-Ratio.

<canvas id="chart" style="display:block;width:100%;height:420px"></canvas>

import { LineChart } from "@sixtyfold/line";

const canvas = document.querySelector<HTMLCanvasElement>("#chart");
if (!canvas) throw new Error("Chart canvas was not found");

const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Temperature", unit: { suffix: " °C", decimals: 1 } }],
});

await chart.initialize();
chart.setData({
  x: new Float64Array([1711929600000, 1711933200000, 1711936800000]),
  y: new Float64Array([12.4, 13.1, 12.8]),
  length: 3,
});

Bundler- und Sicherheitsrichtlinie

Die Konstruktion von Workern verwendet eine von dem Paket emittierte ESM-Worker-URL. Lassen Sie den Bundler Paket-Imports verarbeiten, anstatt kompilierte Dateien in ein öffentliches Verzeichnis zu kopieren. Eine Content-Security-Policy muss Same-Origin-Worker über worker-src 'self' erlauben; falls nicht, fällt renderMode: "auto" auf den Hauptthread zurück.

Die Anwendungs-Build-Toolkette von Angular ist die Ausnahme: Fügen Sie das gepackte Line- oder Stock-dist/assets-Verzeichnis zur assets-Konfiguration der Anwendung hinzu. Die genaue Konfiguration ist in Framework adapters gezeigt.

Sixtyfold lädt keine Fonts, Analytics, Themes, Daten oder andere Netzwerkressourcen automatisch nach. URL-basierte Overlay-Bilder sind die Ausnahme, da der Aufrufer deren URLs explizit bereitstellt.

Aufräumen

chart.destroy();

Verwenden Sie ein Diagramm nach dessen Zerstörung nicht wieder. Erstellen Sie eine neue Instanz, wenn Sie ein neues Canvas anhängen.