So erstellen Sie eine Heatmap mit Highcharts

Highcharts ist eine sehr beliebte JavaScript-Diagrammbibliothek, mit der verschiedene Arten von Diagrammen, einschließlich Heatmaps, erstellt werden können. Heatmaps sind eine Art Diagramm, das die Datendichte darstellt und häufig in der Datenvisualisierung verwendet wird. In diesem Artikel wird erläutert, wie Sie mit Highcharts Heatmaps erstellen, und es werden spezifische Codebeispiele bereitgestellt.

1. Daten vorbereiten

Zuerst müssen wir einige Daten vorbereiten, um die Heatmap zu erstellen. Heatmaps basieren auf zweidimensionalen Daten, wobei jeder Datenpunkt eine X- und Y-Koordinate sowie einen Wert hat, der die Dichte dieses Punkts darstellt. Die Daten werden normalerweise im JSON-Format bereitgestellt, wie zum Beispiel:

var data = [
  [0, 0, 10],
  [0, 1, 19],
  [0, 2, 8],
  [0, 3, 24],
  [0, 4, 67],
  ...
];

wobei die erste Spalte die X-Achsen-Koordinate, die zweite Spalte die Y-Achsen-Koordinate und die dritte Spalte den Dichtewert darstellt.

Wir müssen außerdem die Beschriftungen für die X- und Y-Achse sowie den Titel der Heatmap festlegen.

2. Diagrammcontainer erstellen

Als nächstes müssen wir einen Container innerhalb des HTML-Dokuments erstellen, um unsere Heatmap zu platzieren. Dies kann mithilfe eines div-Elements erfolgen:

<div id="container"></div>

3. Einführung in die Highcharts-Bibliothek

Wir müssen die Highcharts-Bibliothek in das HTML-Dokument einführen, was auf folgende Weise erreicht werden kann:

<script src="https://code.highcharts.com/highcharts.js"></script>

Wenn wir die verwenden möchten Heatmap-Modul zum Erstellen von Heatmaps, wir benötigen außerdem Einführung in das Heatmap-Modul:

<script src="https://code.highcharts.com/modules/heatmap.js"></script>

4. Diagrammoptionen konfigurieren

Als nächstes müssen wir die Optionen im Highcharts-Objekt konfigurieren, um ihm mitzuteilen, wie unsere Heatmap gerendert werden soll. Diese Optionen werden als JavaScript-Objekt definiert, das als „Optionsobjekt“ bezeichnet wird. Hier ist ein grundlegendes Optionsobjekt:

var options = {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  title: {
    text: 'My Heatmap'
  },
  xAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'X Axis'
    }
  },
  yAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'Y Axis'
    }
  },
  colorAxis: {
    min: 0,
    max: 100,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: 'My Data',
    borderWidth: 1,
    data: data,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
};

Einige der wichtigsten Optionen im obigen Optionsobjekt werden im Folgenden erläutert:

• chart: Diese Option teilt Highcharts mit, dass wir eine Heatmap erstellen und die Rahmenbreite und Ränder der Heatmap angeben möchten .
• Titel: Diese Option gibt den Titel der Heatmap an.
• xAxis und yAxis: Diese Optionen definieren die Beschriftungen für die X-Achse und die Y-Achse.
• colorAxis: Diese Option definiert den Bereich und die Farbe der Farbachse.
• Serie: Diese Option definiert die Daten für die Heatmap.

5. Diagramm erstellen

Jetzt können wir die Methode chart() im Highcharts-Objekt verwenden, um eine Heatmap zu erstellen. Diese Methode erfordert zwei Parameter: die ID des Containers und das Optionsobjekt. Das Folgende ist ein Codebeispiel:

var chart = Highcharts.chart('container', options);

6. Zeichnen einer Heatmap

Abschließend müssen wir die redraw()-Methode des Diagrammobjekts aufrufen, um eine Heatmap zu zeichnen, wie unten gezeigt:

chart.redraw();

An diesem Punkt Wir haben die Erstellung mit dem Highcharts Heatmap-Prozess abgeschlossen.

Der vollständige Beispielcode lautet wie folgt:

<div id="container"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<script>
  var data = [
    [0, 0, 10],
    [0, 1, 19],
    [0, 2, 8],
    [0, 3, 24],
    [0, 4, 67],
    ...
  ];

  var options = {
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },
    title: {
      text: 'My Heatmap'
    },
    xAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'X Axis'
      }
    },
    yAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'Y Axis'
      }
    },
    colorAxis: {
      min: 0,
      max: 100,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
      name: 'My Data',
      borderWidth: 1,
      data: data,
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }]
  };

  var chart = Highcharts.chart('container', options);
  chart.redraw();
</script>

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Heatmap mit Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!