Come creare un grafico Marimekko utilizzando Chart.js in Angular

Scopri come creare un grafico Marimekko utilizzando Chart.js in Angular. Approfondiremo i dettagli su come strutturare i dati per i grafici Marimekko e su come personalizzare l'aspetto e il comportamento del grafico utilizzando le opzioni e le API di Chart.js.

La visualizzazione dei dati è una parte essenziale dell'analisi dei dati. E i grafici sono uno dei modi più efficaci per presentare i dati in modo chiaro e conciso.

I grafici Marimekko sono una scelta eccellente per visualizzare set di dati complessi in un formato compatto e visivamente accattivante.

Un grafico Marimekko, noto anche come grafico a mosaico o grafico mekko, è una combinazione di un grafico a barre in pila e un grafico a barre in pila 100%. La larghezza di ciascuna barra rappresenta il valore totale della categoria corrispondente e l'altezza di ciascuna barra rappresenta il contributo relativo di ciascuna sottocategoria al totale.

In questo tutorial, esploreremo come creare un grafico Marimekko utilizzando Chart.js, una potente libreria di grafici. Approfondiremo i dettagli su come strutturare i dati per i grafici Marimekko, nonché su come personalizzare l'aspetto e il comportamento del grafico utilizzando le opzioni e le API di Chart.js.

Sommario:

• Iniziare
• Come strutturare i dati per i grafici Marimekko
• Come creare un grafico Marimekko con Chart.js
• Conclusione

Iniziare

Presumo che tu abbia già familiarità con la creazione di semplici grafici a linee e a barre utilizzando Chart.js in un'applicazione Angular. In questa guida, ci sono alcuni concetti che saranno più facili da comprendere se si dispone di una conoscenza preliminare.

Come strutturare i dati per i grafici Marimekko

Discutiamo la struttura dei dati richiesta per i grafici Marimekko prima di creare il grafico.

I grafici Marimekko necessitano di un array di oggetti, con ogni oggetto che rappresenta una categoria. Ogni oggetto deve avere un'etichetta e un sottoarray di oggetti, dove ogni sottooggetto rappresenta una sottocategoria.

Ogni oggetto secondario deve avere un'etichetta e un valore. Il valore rappresenta la proporzione della sottocategoria rispetto al totale della sua categoria.

Ecco un esempio di come strutturare i dati per un grafico Marimekko:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

In questo esempio, abbiamo due categorie: Categoria 1 e Categoria 2, con tre sottocategorie ciascuna. I valori per le sottocategorie rappresentano la proporzione della sottocategoria in relazione al totale della sua categoria. Ad esempio, nella Categoria 1, la Sottocategoria 1 rappresenta 10 su 60, ovvero il 16,7% del totale.

Come creare un grafico Marimekko con Chart.js

Ora che abbiamo i nostri dati strutturati correttamente, passiamo alla creazione del nostro grafico Marimekko utilizzando Chart.js.

Innanzitutto, dobbiamo creare un elemento canvas nel nostro codice HTML per contenere il grafico:

<canvas id="marimekkoChart"></canvas>

Successivamente, dovremo installare Chart.js e importarlo nel nostro componente Angular:

npm install chart.js

import Chart from 'chart.js/auto';

Nella nostra classe di componenti, possiamo quindi creare un nuovo oggetto Chart e passare i nostri dati e le nostre opzioni:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

In questo esempio, stiamo creando un grafico Marimekko con tre sottocategorie per due categorie. Abbiamo impostato il tipo di grafico su "barra" e stiamo trasmettendo i nostri dati e le nostre opzioni. L'opzione 'indexAxis' è impostata su 'y' per rendere il grafico orizzontale e l'opzione 'legend' è impostata per posizionare la legenda nella parte inferiore del grafico.

Congratulazioni! Se hai seguito attentamente, non dovresti incorrere in errori e il tuo output potrebbe essere simile al seguente:

E questo è tutto! Con questo codice, possiamo creare un grafico Marimekko in Chart.js in Angular.

Puoi personalizzare ulteriormente il tuo grafico utilizzando varie opzioni e API di Chart.js, come la regolazione dei colori, delle etichette e dei comportamenti dei suggerimenti, per renderlo ancora più informativo e coinvolgente.

Conclusione

Chart.js è una libreria molto utile e potente. In questo breve tutorial, abbiamo spiegato come creare un grafico Marimekko in Chart.js in Angular. Se desideri includere qualsiasi tipo di grafico nella tua applicazione Angular, è molto semplice crearli con Chart.js.

Il codice completo per questa applicazione Angular è ospitato sul mio GitHub Repo .

Spero che tu abbia trovato questo tutorial utile e informativo.

Fonte: https://www.freecodecamp.org

#angular #chartjs 

如何在 Angular 中使用 Chart.js 創建 Marimekko 圖表

了解如何在 Angular 中使用 Chart.js 創建 Marimekko 圖表。我們將深入研究如何構建 Marimekko 圖表的數據結構，以及如何使用 Chart.js 選項和 API 自定義圖表的外觀和行為。

數據可視化是數據分析的重要組成部分。圖表是以清晰簡潔的方式呈現數據的最有效方式之一。

Marimekko 圖表是以緊湊且具有視覺吸引力的格式顯示複雜數據集的絕佳選擇。

Marimekko 圖，也稱為馬賽克圖或 mekko 圖，是堆疊條形圖和 100% 堆疊條形圖的組合。每個條形的寬度代表相應類別的總價值，每個條形的高度代表每個子類別對該總數的相對貢獻。

在本教程中，我們將探討如何使用功能強大的圖表庫 Chart.js 創建 Marimekko 圖表。我們將深入研究如何構建 Marimekko 圖表的數據結構，以及如何使用 Chart.js 選項和 API 自定義圖表的外觀和行為。

目錄：

• 入門
• 如何為 Marimekko 圖表構建數據結構
• 如何使用 Chart.js 創建 Marimekko 圖表
• 結論

入門

我假設您已經熟悉在 Angular 應用程序中使用 Chart.js 創建簡單的折線圖和條形圖。在本指南中，如果您有先驗知識，某些概念將更容易理解。

如何為 Marimekko 圖表構建數據結構

在創建圖表之前，讓我們討論一下 Marimekko 圖表所需的數據結構。

Marimekko 圖表需要一組對象，每個對象代表一個類別。每個對像都必須有一個標籤和一個對象子數組，其中每個子對象代表一個子類別。

每個子對像都必須有一個標籤和一個值。該值表示子類別相對於其類別總數的比例。

以下是如何為 Marimekko 圖表構建數據結構的示例：

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

在此示例中，我們有兩個類別：類別 1 和類別 2，每個類別包含三個子類別。子類別的值表示子類別相對於其類別總數的比例。例如，在類別 1 中，子類別 1 代表 60 個中的 10 個，即總數的 16.7%。

如何使用 Chart.js 創建 Marimekko 圖表

現在我們的數據結構正確，讓我們繼續使用 Chart.js 創建我們的 Marimekko 圖表。

首先，我們需要在 HTML 代碼中創建一個 canvas 元素來保存圖表：

<canvas id="marimekkoChart"></canvas>

接下來，我們需要安裝 Chart.js 並將其導入到我們的 Angular 組件中：

npm install chart.js

import Chart from 'chart.js/auto';

在我們的組件類中，我們可以創建一個新的 Chart 對象並傳入我們的數據和選項：

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

在此示例中，我們正在創建一個 Marimekko 圖表，其中包含兩個類別的三個子類別。我們已將圖表類型設置為“條形圖”，並且我們正在傳遞我們的數據和選項。'indexAxis' 選項設置為 'y' 以使圖表水平，'legend' 選項設置為將圖例放置在圖表底部。

恭喜！如果您仔細遵循，那麼您應該不會遇到任何錯誤，並且您的輸出可能如下所示：

就是這樣！使用此代碼，我們可以在 Angular 的 Chart.js 中創建 Marimekko 圖表。

您可以使用各種 Chart.js 選項和 API 進一步自定義您的圖表，例如調整顏色、標籤和工具提示行為，以使其更具信息性和吸引力。

結論

Chart.js 是一個非常有用和強大的庫。在本快速教程中，我們介紹瞭如何在 Angular 的 Chart.js 中創建 Marimekko 圖表。如果您想在 Angular 應用程序中包含任何類型的圖表，那麼使用 Chart.js 製作它們非常容易。

這個 Angular 應用程序的完整代碼託管在我的GitHub Repo上。

我希望您發現本教程對您有所幫助且內容豐富。

資料來源： https: //www.freecodecamp.org

#angular #chartjs 

Cómo crear un gráfico Marimekko usando Chart.js en Angular

Aprenda a crear un gráfico Marimekko usando Chart.js en Angular. Profundizaremos en los detalles de cómo estructurar los datos para los gráficos de Marimekko y cómo personalizar la apariencia y el comportamiento del gráfico usando las API y las opciones de Chart.js.

La visualización de datos es una parte esencial del análisis de datos. Y los gráficos son una de las formas más efectivas de presentar datos de manera clara y concisa.

Los gráficos de Marimekko son una excelente opción para mostrar conjuntos de datos complejos en un formato compacto y visualmente atractivo.

Un gráfico Marimekko, también conocido como gráfico de mosaico o gráfico mekko, es una combinación de un gráfico de barras apiladas y un gráfico de barras 100 % apiladas. El ancho de cada barra representa el valor total de la categoría correspondiente, y la altura de cada barra representa la contribución relativa de cada subcategoría a ese total.

En este tutorial, exploraremos cómo crear un gráfico de Marimekko usando Chart.js, una poderosa biblioteca de gráficos. Profundizaremos en los detalles de cómo estructurar los datos para los gráficos de Marimekko, así como también cómo personalizar la apariencia y el comportamiento del gráfico usando las API y las opciones de Chart.js.

Tabla de contenido:

• Empezando
• Cómo estructurar datos para gráficos de Marimekko
• Cómo crear un gráfico Marimekko con Chart.js
• Conclusión

Empezando

Supongo que ya está familiarizado con la creación de gráficos de barras y líneas simples usando Chart.js en una aplicación Angular. En esta guía, hay ciertos conceptos que serán más fáciles de comprender si tiene conocimientos previos.

Cómo estructurar datos para gráficos de Marimekko

Analicemos la estructura de datos necesaria para los gráficos de Marimekko antes de crear el gráfico.

Los gráficos de Marimekko necesitan una matriz de objetos, cada uno de los cuales representa una categoría. Cada objeto debe tener una etiqueta y una submatriz de objetos, donde cada subobjeto representa una subcategoría.

Cada subobjeto debe tener una etiqueta y un valor. El valor representa la proporción de la subcategoría en relación al total de su categoría.

Aquí hay un ejemplo de cómo estructurar datos para un gráfico de Marimekko:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

En este ejemplo, tenemos dos categorías: Categoría 1 y Categoría 2, con tres subcategorías cada una. Los valores de las subcategorías representan la proporción de la subcategoría en relación al total de su categoría. Por ejemplo, en la Categoría 1, la Subcategoría 1 representa 10 de 60, o el 16,7% del total.

Cómo crear un gráfico Marimekko con Chart.js

Ahora que tenemos nuestros datos estructurados correctamente, pasemos a crear nuestro gráfico de Marimekko usando Chart.js.

Primero, necesitamos crear un elemento de lienzo en nuestro código HTML para contener el gráfico:

<canvas id="marimekkoChart"></canvas>

A continuación, necesitaremos instalar Chart.js e importarlo a nuestro componente Angular:

npm install chart.js

import Chart from 'chart.js/auto';

En nuestra clase de componente, podemos crear un nuevo objeto Chart y pasar nuestros datos y opciones:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

En este ejemplo, estamos creando un gráfico Marimekko con tres subcategorías para dos categorías. Hemos establecido el tipo de gráfico en 'barra' y estamos pasando nuestros datos y opciones. La opción 'indexAxis' se establece en 'y' para que el gráfico sea horizontal, y la opción 'leyenda' se establece para colocar la leyenda en la parte inferior del gráfico.

¡Felicidades! Si ha seguido con cuidado, entonces no debería encontrarse con ningún error y su salida puede verse como la siguiente:

¡Y eso es! Con este código, podemos crear un gráfico Marimekko en Chart.js en Angular.

Puede personalizar aún más su gráfico utilizando varias opciones y API de Chart.js, como ajustar los colores, las etiquetas y los comportamientos de información sobre herramientas, para que sea aún más informativo y atractivo.

Conclusión

Chart.js es una biblioteca muy útil y poderosa. En este tutorial rápido, cubrimos cómo crear un gráfico de Marimekko en Chart.js en Angular. Si desea incluir cualquier tipo de gráfico en su aplicación Angular, es muy fácil hacerlo con Chart.js.

El código completo de esta aplicación Angular está alojado en mi GitHub Repo .

Espero que hayas encontrado este tutorial útil e informativo.

Fuente: https://www.freecodecamp.org

#angular #chartjs 

Comment créer un graphique Marimekko à l'aide de Chart.js dans Angular

Apprenez à créer un graphique Marimekko à l'aide de Chart.js dans Angular. Nous allons nous plonger dans les détails de la structuration des données des graphiques Marimekko et de la personnalisation de l'apparence et du comportement du graphique à l'aide des options et des API de Chart.js.

La visualisation des données est une partie essentielle de l'analyse des données. Et les graphiques sont l'un des moyens les plus efficaces de présenter des données de manière claire et concise.

Les graphiques Marimekko sont un excellent choix pour afficher des ensembles de données complexes dans un format compact et visuellement attrayant.

Un graphique Marimekko, également appelé graphique en mosaïque ou graphique mekko, est une combinaison d'un graphique à barres empilées et d'un graphique à barres empilées à 100 %. La largeur de chaque barre représente la valeur totale de la catégorie correspondante, et la hauteur de chaque barre représente la contribution relative de chaque sous-catégorie à ce total.

Dans ce didacticiel, nous allons explorer comment créer un graphique Marimekko à l'aide de Chart.js, une puissante bibliothèque de graphiques. Nous approfondirons les détails de la structuration des données des graphiques Marimekko, ainsi que la personnalisation de l'apparence et du comportement du graphique à l'aide des options et des API de Chart.js.

Table des matières:

• Commencer
• Comment structurer les données pour les graphiques Marimekko
• Comment créer un graphique Marimekko avec Chart.js
• Conclusion

Commencer

Je suppose que vous êtes déjà familiarisé avec la création de graphiques à courbes et à barres simples à l'aide de Chart.js dans une application Angular. Dans ce guide, certains concepts seront plus faciles à comprendre si vous avez des connaissances préalables.

Comment structurer les données pour les graphiques Marimekko

Discutons de la structure de données requise pour les graphiques Marimekko avant de créer le graphique.

Les graphiques Marimekko ont besoin d'un tableau d'objets, chaque objet représentant une catégorie. Chaque objet doit avoir une étiquette et un sous-tableau d'objets, où chaque sous-objet représente une sous-catégorie.

Chaque sous-objet doit avoir une étiquette et une valeur. La valeur représente la proportion de la sous-catégorie par rapport au total de sa catégorie.

Voici un exemple de structure des données pour un graphique Marimekko :

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

Dans cet exemple, nous avons deux catégories : Catégorie 1 et Catégorie 2, avec trois sous-catégories chacune. Les valeurs des sous-catégories représentent la proportion de la sous-catégorie par rapport au total de sa catégorie. Par exemple, dans la catégorie 1, la sous-catégorie 1 représente 10 sur 60, soit 16,7 % du total.

Comment créer un graphique Marimekko avec Chart.js

Maintenant que nos données sont correctement structurées, passons à la création de notre graphique Marimekko à l'aide de Chart.js.

Tout d'abord, nous devons créer un élément canvas dans notre code HTML pour contenir le graphique :

<canvas id="marimekkoChart"></canvas>

Ensuite, nous devrons installer Chart.js et l'importer dans notre composant Angular :

npm install chart.js

import Chart from 'chart.js/auto';

Dans notre classe de composants, nous pouvons ensuite créer un nouvel objet Chart et transmettre nos données et options :

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

Dans cet exemple, nous créons un graphique Marimekko avec trois sous-catégories pour deux catégories. Nous avons défini le type de graphique sur "barre" et nous transmettons nos données et nos options. L'option 'indexAxis' est définie sur 'y' pour rendre le graphique horizontal, et l'option 'legend' est définie pour positionner la légende au bas du graphique.

Toutes nos félicitations! Si vous avez suivi attentivement, vous ne devriez pas rencontrer d'erreurs et votre résultat peut ressembler à ce qui suit :

Et c'est tout! Avec ce code, nous pouvons créer un graphique Marimekko dans Chart.js dans Angular.

Vous pouvez personnaliser davantage votre graphique à l'aide de diverses options et API Chart.js, telles que l'ajustement des couleurs, des étiquettes et des comportements des info-bulles, pour le rendre encore plus informatif et attrayant.

Conclusion

Chart.js est une bibliothèque très utile et puissante. Dans ce rapide tutoriel, nous avons expliqué comment créer un graphique Marimekko dans Chart.js dans Angular. Si vous souhaitez inclure n'importe quel type de graphique dans votre application Angular, il est très facile de les créer avec Chart.js.

Le code complet de cette application Angular est hébergé sur mon GitHub Repo .

J'espère que vous avez trouvé ce tutoriel utile et informatif.

Source : https://www.freecodecamp.org

#angular #chartjs 

Angular で Chart.js を使用してマリメッコ チャートを作成する方法

Angular で Chart.js を使用してマリメッコ チャートを作成する方法を学びます。マリメッコ グラフのデータを構造化する方法と、Chart.js のオプションと API を使用してグラフの外観と動作をカスタマイズする方法について詳しく説明します。

データの視覚化は、データ分析の重要な部分です。また、グラフは、データを明確かつ簡潔に表示する最も効果的な方法の 1 つです。

マリメッコ グラフは、複雑なデータ セットをコンパクトで視覚的に魅力的な形式で表示するための優れた選択肢です。

モザイク チャートまたはメッコ チャートとも呼ばれるマリメッコ チャートは、積み上げ棒グラフと 100% 積み上げ棒グラフを組み合わせたものです。各バーの幅は、対応するカテゴリの合計値を表し、各バーの高さは、その合計に対する各サブカテゴリの相対的な貢献度を表します。

このチュートリアルでは、強力なグラフ作成ライブラリである Chart.js を使用してマリメッコ グラフを作成する方法について説明します。マリメッコ グラフのデータを構造化する方法と、Chart.js のオプションと API を使用してグラフの外観と動作をカスタマイズする方法について詳しく説明します。

目次：

• 入門
• マリメッコ チャートのデータを構造化する方法
• Chart.js でマリメッコ チャートを作成する方法
• 結論

入門

Angular アプリケーションで Chart.js を使用して単純な折れ線グラフと棒グラフを作成する方法に既に慣れていることを前提としています。このガイドには、予備知識があれば理解しやすい特定の概念があります。

マリメッコ チャートのデータを構造化する方法

チャートを作成する前に、マリメッコ チャートに必要なデータ構造について説明しましょう。

マリメッコ チャートには、各オブジェクトがカテゴリを表すオブジェクトの配列が必要です。各オブジェクトには、ラベルとオブジェクトのサブ配列が必要です。各サブオブジェクトはサブカテゴリを表します。

各サブオブジェクトには、ラベルと値が必要です。値は、そのカテゴリの合計に対するサブカテゴリの割合を表します。

以下は、マリメッコ グラフのデータを構造化する方法の例です。

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

この例では、カテゴリ 1 とカテゴリ 2 の 2 つのカテゴリがあり、それぞれに 3 つのサブカテゴリがあります。サブカテゴリの値は、そのカテゴリの合計に対するサブカテゴリの割合を表します。たとえば、カテゴリ 1 では、サブカテゴリ 1 は 60 のうち 10、つまり全体の 16.7% を表します。

Chart.js でマリメッコ チャートを作成する方法

データが正しく構造化されたので、Chart.js を使用してマリメッコ チャートを作成します。

まず、チャートを保持するためのキャンバス要素を HTML コードで作成する必要があります。

<canvas id="marimekkoChart"></canvas>

次に、Chart.js をインストールして Angular コンポーネントにインポートする必要があります。

npm install chart.js

import Chart from 'chart.js/auto';

コンポーネント クラスでは、新しい Chart オブジェクトを作成し、データとオプションを渡すことができます。

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

この例では、2 つのカテゴリに 3 つのサブカテゴリを持つマリメッコ チャートを作成しています。チャートのタイプを「棒」に設定し、データとオプションを渡しています。'indexAxis' オプションを 'y' に設定してグラフを水平にし、'legend' オプションを設定して凡例をグラフの下部に配置します。

おめでとう！注意深く従った場合、エラーは発生せず、出力は次のようになります。

以上です！このコードを使用すると、Angular の Chart.js でマリメッコ チャートを作成できます。

色、ラベル、ツールチップの動作を調整するなど、Chart.js のさまざまなオプションと API を使用してグラフをさらにカスタマイズし、より有益で魅力的なものにすることができます。

結論

Chart.js は非常に便利で強力なライブラリです。この簡単なチュートリアルでは、Angular の Chart.js でマリメッコ チャートを作成する方法について説明しました。Angular アプリケーションに任意のタイプのグラフを含めたい場合、Chart.js を使用して作成するのは非常に簡単です。

この Angular アプリケーションの完全なコードは、私のGitHub Repoでホストされています。

このチュートリアルがお役に立てば幸いです。

ソース: https://www.freecodecamp.org

#angular #chartjs 

Как создать диаграмму Marimekko с помощью Chart.js в Angular

Узнайте, как создать диаграмму Marimekko с помощью Chart.js в Angular. Мы подробно рассмотрим, как структурировать данные для диаграмм Marimekko и как настроить внешний вид и поведение диаграммы с помощью параметров и API-интерфейсов Chart.js.

Визуализация данных является неотъемлемой частью анализа данных. А диаграммы — один из самых эффективных способов представления данных в ясной и лаконичной форме.

Диаграммы Marimekko — отличный выбор для отображения сложных наборов данных в компактном и визуально привлекательном формате.

Диаграмма Marimekko, также известная как мозаичная диаграмма или диаграмма mekko, представляет собой комбинацию гистограммы с накоплением и гистограммы со 100% накоплением. Ширина каждого столбца представляет общее значение соответствующей категории, а высота каждого столбца представляет относительный вклад каждой подкатегории в это общее количество.

В этом руководстве мы рассмотрим, как создать диаграмму Marimekko с помощью Chart.js, мощной библиотеки построения диаграмм. Мы подробно рассмотрим, как структурировать данные для диаграмм Marimekko, а также как настроить внешний вид и поведение диаграммы с помощью параметров и API-интерфейсов Chart.js.

Оглавление:

• Начиная
• Как структурировать данные для диаграмм Marimekko
• Как создать диаграмму Marimekko с помощью Chart.js
• Заключение

Начиная

Я предполагаю, что вы уже знакомы с созданием простых линейных и гистограмм с помощью Chart.js в приложении Angular. В этом руководстве есть определенные концепции, которые будет легче понять, если у вас есть предварительные знания.

Как структурировать данные для диаграмм Marimekko

Давайте обсудим структуру данных, необходимую для диаграмм Marimekko, прежде чем создавать диаграмму.

Для диаграмм Marimekko требуется массив объектов, каждый из которых представляет категорию. Каждый объект должен иметь метку и подмассив объектов, где каждый подобъект представляет подкатегорию.

Каждый подобъект должен иметь метку и значение. Значение представляет долю подкатегории по отношению к общему количеству ее категории.

Вот пример того, как структурировать данные для диаграммы Marimekko:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

В этом примере у нас есть две категории: Категория 1 и Категория 2, по три подкатегории в каждой. Значения для подкатегорий представляют долю подкатегории по отношению к общему количеству ее категории. Например, в категории 1 подкатегория 1 представляет 10 из 60, или 16,7% от общего числа.

Как создать диаграмму Marimekko с помощью Chart.js

Теперь, когда мы правильно структурировали наши данные, давайте перейдем к созданию нашей диаграммы Marimekko с помощью Chart.js.

Во-первых, нам нужно создать элемент холста в нашем HTML-коде для хранения диаграммы:

<canvas id="marimekkoChart"></canvas>

Далее нам нужно установить Chart.js и импортировать его в наш компонент Angular:

npm install chart.js

import Chart from 'chart.js/auto';

Затем в нашем классе компонентов мы можем создать новый объект Chart и передать наши данные и параметры:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

В этом примере мы создаем диаграмму Marimekko с тремя подкатегориями для двух категорий. Мы установили тип диаграммы на «столбик» и передаем наши данные и параметры. Для параметра indexAxis установлено значение «y», чтобы сделать диаграмму горизонтальной, а для параметра «legend» установлено положение легенды внизу диаграммы.

Поздравляем! Если вы внимательно следовали инструкциям, то не должны столкнуться с какими-либо ошибками, и ваш вывод может выглядеть следующим образом:

Вот и все! С помощью этого кода мы можем создать диаграмму Marimekko в Chart.js в Angular.

Вы можете дополнительно настроить диаграмму, используя различные параметры и API-интерфейсы Chart.js, такие как настройка цветов, меток и поведения всплывающих подсказок, чтобы сделать ее еще более информативной и привлекательной.

Заключение

Chart.js — очень полезная и мощная библиотека. В этом кратком руководстве мы рассмотрели, как создать диаграмму Marimekko в Chart.js в Angular. Если вы хотите включить любой тип диаграммы в свое приложение Angular, то это очень легко сделать с помощью Chart.js.

Полный код этого приложения Angular размещен в моем репозитории GitHub .

Я надеюсь, что вы нашли этот урок полезным и информативным.

Источник: https://www.freecodecamp.org

#angular #chartjs 

Angular에서 Chart.js를 사용하여 Marimekko 차트를 만드는 방법

Angular에서 Chart.js를 사용하여 Marimekko 차트를 만드는 방법을 알아보세요. Marimekko 차트의 데이터를 구조화하는 방법과 Chart.js 옵션 및 API를 사용하여 차트의 모양과 동작을 사용자 지정하는 방법에 대해 자세히 알아봅니다.

데이터 시각화는 데이터 분석의 필수적인 부분입니다. 차트는 데이터를 명확하고 간결하게 표현하는 가장 효과적인 방법 중 하나입니다.

Marimekko 차트는 복잡한 데이터 세트를 간결하고 시각적으로 매력적인 형식으로 표시하는 데 탁월한 선택입니다.

모자이크 차트 또는 mekko 차트라고도 하는 Marimekko 차트는 누적 막대 차트와 100% 누적 막대 차트의 조합입니다. 각 막대의 너비는 해당 범주의 총 ​​값을 나타내고 각 막대의 높이는 해당 총계에 대한 각 하위 범주의 상대적 기여도를 나타냅니다.

이 자습서에서는 강력한 차트 라이브러리인 Chart.js를 사용하여 Marimekko 차트를 만드는 방법을 살펴봅니다. Marimekko 차트의 데이터를 구조화하는 방법과 Chart.js 옵션 및 API를 사용하여 차트의 모양과 동작을 사용자 지정하는 방법에 대해 자세히 알아봅니다.

목차:

• 시작하기
• Marimekko 차트용 데이터 구조화 방법
• Chart.js로 Marimekko 차트를 만드는 방법
• 결론

시작하기

Angular 애플리케이션에서 Chart.js를 사용하여 간단한 선 및 막대 차트를 만드는 데 이미 익숙하다고 가정합니다. 이 가이드에는 사전 지식이 있는 경우 이해하기 쉬운 특정 개념이 있습니다.

Marimekko 차트용 데이터 구조화 방법

차트를 만들기 전에 Marimekko 차트에 필요한 데이터 구조에 대해 논의해 봅시다.

Marimekko 차트에는 각 개체가 범주를 나타내는 개체 배열이 필요합니다. 각 개체에는 레이블과 개체의 하위 배열이 있어야 하며 각 하위 개체는 하위 범주를 나타냅니다.

각 하위 개체에는 레이블과 값이 있어야 합니다. 값은 해당 범주의 합계와 관련된 하위 범주의 비율을 나타냅니다.

다음은 Marimekko 차트의 데이터를 구조화하는 방법의 예입니다.

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

이 예에는 범주 1과 범주 2의 두 가지 범주가 있으며 각각 세 개의 하위 범주가 있습니다. 하위 범주에 대한 값은 해당 범주 전체와 관련된 하위 범주의 비율을 나타냅니다. 예를 들어 범주 1에서 하위 범주 1은 60개 중 10개 또는 전체의 16.7%를 나타냅니다.

Chart.js로 Marimekko 차트를 만드는 방법

이제 데이터가 올바르게 구성되었으므로 Chart.js를 사용하여 Marimekko 차트를 생성해 보겠습니다.

먼저 차트를 보관할 HTML 코드에 캔버스 요소를 만들어야 합니다.

<canvas id="marimekkoChart"></canvas>

다음으로 Chart.js를 설치하고 Angular 구성 요소로 가져와야 합니다.

npm install chart.js

import Chart from 'chart.js/auto';

구성 요소 클래스에서 새 Chart 개체를 만들고 데이터와 옵션을 전달할 수 있습니다.

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

이 예에서는 2개의 범주에 대한 3개의 하위 범주가 있는 Marimekko 차트를 만듭니다. 차트 유형을 '막대'로 설정했고 데이터와 옵션을 전달하고 있습니다. 'indexAxis' 옵션은 'y'로 설정하여 차트를 가로로 만들고 'legend' 옵션은 범례를 차트 하단에 배치하도록 설정합니다.

축하해요! 주의 깊게 따라했다면 오류가 발생하지 않아야 하며 출력은 다음과 같을 수 있습니다.

그리고 그게 다야! 이 코드를 사용하여 Angular의 Chart.js에서 Marimekko 차트를 만들 수 있습니다.

다양한 Chart.js 옵션 및 API(예: 색상, 레이블 및 도구 설명 동작 조정)를 사용하여 차트를 추가로 사용자 지정하여 더욱 유익하고 매력적으로 만들 수 있습니다.

결론

Chart.js는 매우 유용하고 강력한 라이브러리입니다. 이 빠른 자습서에서는 Angular의 Chart.js에서 Marimekko 차트를 만드는 방법을 다루었습니다. Angular 애플리케이션에 모든 유형의 차트를 포함하려는 경우 Chart.js를 사용하여 차트를 만드는 것은 매우 쉽습니다.

이 Angular 애플리케이션의 전체 코드는 내 GitHub Repo 에서 호스팅됩니다 .

이 튜토리얼이 유용하고 유익한 정보였기를 바랍니다.

출처: https://www.freecodecamp.org

#angular #chartjs 

Como criar um gráfico Marimekko usando Chart.js em Angular

Aprenda a criar um gráfico Marimekko usando Chart.js em Angular. Vamos nos aprofundar nos detalhes de como estruturar os dados para gráficos Marimekko e como personalizar a aparência e o comportamento do gráfico usando opções e APIs do Chart.js.

A visualização de dados é uma parte essencial da análise de dados. E os gráficos são uma das formas mais eficazes de apresentar dados de maneira clara e concisa.

Os gráficos Marimekko são uma excelente escolha para exibir conjuntos de dados complexos em um formato compacto e visualmente atraente.

Um gráfico Marimekko, também conhecido como gráfico em mosaico ou gráfico mekko, é uma combinação de um gráfico de barras empilhadas e um gráfico de barras 100% empilhadas. A largura de cada barra representa o valor total da categoria correspondente e a altura de cada barra representa a contribuição relativa de cada subcategoria para esse total.

Neste tutorial, exploraremos como criar um gráfico Marimekko usando Chart.js, uma poderosa biblioteca de gráficos. Vamos nos aprofundar nos detalhes de como estruturar os dados para gráficos Marimekko, bem como personalizar a aparência e o comportamento do gráfico usando opções e APIs do Chart.js.

Índice:

• Começando
• Como estruturar dados para gráficos Marimekko
• Como criar um gráfico Marimekko com Chart.js
• Conclusão

Começando

Presumo que você já tenha familiaridade com a criação de gráficos simples de linhas e barras usando Chart.js em um aplicativo Angular. Neste guia, existem alguns conceitos que serão mais fáceis de compreender se você tiver conhecimento prévio.

Como estruturar dados para gráficos Marimekko

Vamos discutir a estrutura de dados necessária para gráficos Marimekko antes de criar o gráfico.

Os gráficos de Marimekko precisam de uma matriz de objetos, com cada objeto representando uma categoria. Cada objeto deve ter um rótulo e um sub-array de objetos, onde cada sub-objeto representa uma sub-categoria.

Cada subobjeto deve ter um rótulo e um valor. O valor representa a proporção da subcategoria em relação ao total de sua categoria.

Aqui está um exemplo de como estruturar dados para um gráfico Marimekko:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

Neste exemplo, temos duas categorias: Categoria 1 e Categoria 2, com três subcategorias cada. Os valores das subcategorias representam a proporção da subcategoria em relação ao total de sua categoria. Por exemplo, na Categoria 1, a Subcategoria 1 representa 10 de 60, ou 16,7% do total.

Como criar um gráfico Marimekko com Chart.js

Agora que temos nossos dados estruturados corretamente, vamos criar nosso gráfico Marimekko usando Chart.js.

Primeiro, precisamos criar um elemento canvas em nosso código HTML para conter o gráfico:

<canvas id="marimekkoChart"></canvas>

Em seguida, precisaremos instalar o Chart.js e importá-lo para nosso componente Angular:

npm install chart.js

import Chart from 'chart.js/auto';

Em nossa classe de componente, podemos criar um novo objeto Chart e passar nossos dados e opções:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

Neste exemplo, estamos criando um gráfico Marimekko com três subcategorias para duas categorias. Definimos o tipo de gráfico como 'barra' e estamos passando nossos dados e opções. A opção 'indexAxis' é definida como 'y' para tornar o gráfico horizontal e a opção 'legend' é definida para posicionar a legenda na parte inferior do gráfico.

Parabéns! Se você seguiu com cuidado, não deve encontrar nenhum erro e sua saída pode ser semelhante à seguinte:

E é isso! Com este código, podemos criar um gráfico Marimekko em Chart.js em Angular.

Você pode personalizar ainda mais seu gráfico usando várias opções e APIs do Chart.js, como ajustar cores, rótulos e comportamentos de dica de ferramenta, para torná-lo ainda mais informativo e atraente.

Conclusão

Chart.js é uma biblioteca muito útil e poderosa. Neste tutorial rápido, abordamos como criar um gráfico Marimekko em Chart.js em Angular. Se você deseja incluir qualquer tipo de gráfico em seu aplicativo Angular, é muito fácil criá-los com Chart.js.

O código completo para este aplicativo Angular está hospedado no meu GitHub Repo .

Espero que você tenha achado este tutorial útil e informativo.

Fonte: https://www.freecodecamp.org

#angular #chartjs 

كيفية إنشاء مخطط Marimekko باستخدام Chart.js في Angular

تعرف على كيفية إنشاء مخطط Marimekko باستخدام Chart.js في Angular. سوف نتعمق في تفاصيل كيفية هيكلة البيانات لمخططات Marimekko ، وكيفية تخصيص مظهر الرسم البياني وسلوكه باستخدام خيارات Chart.js وواجهات برمجة التطبيقات.

يعد تصور البيانات جزءًا أساسيًا من تحليل البيانات. تعد المخططات من أكثر الطرق فاعلية لعرض البيانات بطريقة واضحة وموجزة.

تعد مخططات Marimekko خيارًا ممتازًا لعرض مجموعات البيانات المعقدة بتنسيق مضغوط وجذاب بصريًا.

مخطط Marimekko ، المعروف أيضًا باسم مخطط الفسيفساء أو مخطط ميكو ، هو مزيج من مخطط شريطي مكدس ومخطط شريطي مكدس بنسبة 100٪. يمثل عرض كل شريط القيمة الإجمالية للفئة المقابلة ، ويمثل ارتفاع كل شريط المساهمة النسبية لكل فئة فرعية في هذا الإجمالي.

في هذا البرنامج التعليمي ، سوف نستكشف كيفية إنشاء مخطط Marimekko باستخدام Chart.js ، مكتبة الرسوم البيانية القوية. سوف نتعمق في تفاصيل كيفية هيكلة البيانات لمخططات Marimekko ، وكذلك كيفية تخصيص مظهر الرسم البياني وسلوكه باستخدام خيارات Chart.js وواجهات برمجة التطبيقات.

جدول المحتويات:

• ابدء
• كيفية هيكلة البيانات لمخططات Marimekko
• كيفية إنشاء مخطط Marimekko باستخدام Chart.js
• خاتمة

ابدء

أفترض أن لديك بالفعل إلمامًا بإنشاء مخططات خطية وشريطية بسيطة باستخدام Chart.js في تطبيق Angular. في هذا الدليل ، هناك بعض المفاهيم التي سيكون من السهل فهمها إذا كانت لديك معرفة مسبقة.

كيفية هيكلة البيانات لمخططات Marimekko

دعونا نناقش بنية البيانات المطلوبة لمخططات Marimekko قبل إنشاء المخطط.

تحتاج مخططات Marimekko إلى مجموعة من الكائنات ، حيث يمثل كل كائن فئة. يجب أن يكون لكل كائن تسمية ومجموعة فرعية من الكائنات ، حيث يمثل كل كائن فرعي فئة فرعية.

يجب أن يكون لكل كائن فرعي تسمية وقيمة. تمثل القيمة نسبة الفئة الفرعية بالنسبة إلى إجمالي فئتها.

فيما يلي مثال على كيفية هيكلة البيانات لمخطط Marimekko:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

في هذا المثال ، لدينا فئتان: الفئة 1 والفئة 2 ، مع ثلاث فئات فرعية لكل منهما. تمثل قيم الفئات الفرعية نسبة الفئة الفرعية بالنسبة إلى إجمالي فئتها. على سبيل المثال ، في الفئة 1 ، تمثل الفئة الفرعية 1 10 من 60 ، أو 16.7٪ من الإجمالي.

كيفية إنشاء مخطط Marimekko باستخدام Chart.js

الآن بعد أن تم تنظيم بياناتنا بشكل صحيح ، دعنا ننتقل إلى إنشاء مخطط Marimekko الخاص بنا باستخدام Chart.js.

أولاً ، نحتاج إلى إنشاء عنصر Canvas في كود HTML الخاص بنا للاحتفاظ بالرسم البياني:

<canvas id="marimekkoChart"></canvas>

بعد ذلك ، سنحتاج إلى تثبيت Chart.js واستيراده إلى مكون Angular الخاص بنا:

npm install chart.js

import Chart from 'chart.js/auto';

في فئة المكونات الخاصة بنا ، يمكننا بعد ذلك إنشاء كائن مخطط جديد وتمرير بياناتنا وخياراتنا:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

في هذا المثال ، نقوم بإنشاء مخطط Marimekko بثلاث فئات فرعية لفئتين. لقد قمنا بتعيين نوع المخطط على "شريط" ، ونقوم بتمرير بياناتنا وخياراتنا. يتم تعيين خيار "indexAxis" على "y" لجعل المخطط أفقيًا ، ويتم تعيين خيار "وسيلة الإيضاح" لوضع وسيلة الإيضاح في أسفل الرسم البياني.

تهانينا! إذا كنت قد اتبعت بعناية ، فلن تواجه أي أخطاء وقد تبدو مخرجاتك كما يلي:

وهذا كل شيء! باستخدام هذا الرمز ، يمكننا إنشاء مخطط Marimekko في Chart.js في Angular.

يمكنك تخصيص مخططك بشكل أكبر باستخدام خيارات وواجهات برمجة تطبيقات Chart.js المختلفة ، مثل ضبط الألوان والتسميات وسلوكيات تلميحات الأدوات ، لجعله أكثر إفادة وجاذبية.

خاتمة

Chart.js مكتبة قوية ومفيدة للغاية. في هذا البرنامج التعليمي السريع ، قمنا بتغطية كيفية إنشاء مخطط Marimekko في Chart.js في Angular. إذا كنت تريد تضمين أي نوع من المخططات في تطبيق Angular الخاص بك ، فمن السهل جدًا إنشاءها باستخدام Chart.js.

تتم استضافة الكود الكامل لهذا التطبيق Angular على GitHub Repo الخاص بي .

أتمنى أن تكون قد وجدت هذا البرنامج التعليمي مفيدًا وغنيًا بالمعلومات.

المصدر: https://www.freecodecamp.org

#angular #chartjs 

Cách tạo Biểu đồ Marimekko bằng Chart.js trong Angular

Tìm hiểu cách tạo biểu đồ Marimekko bằng Chart.js trong Angular. Chúng ta sẽ đi sâu vào chi tiết về cách cấu trúc dữ liệu cho biểu đồ Marimekko cũng như cách tùy chỉnh giao diện và hành vi của biểu đồ bằng cách sử dụng các tùy chọn và API của Chart.js.

Trực quan hóa dữ liệu là một phần thiết yếu của phân tích dữ liệu. Và biểu đồ là một trong những cách hiệu quả nhất để trình bày dữ liệu một cách rõ ràng và ngắn gọn.

Biểu đồ Marimekko là một lựa chọn tuyệt vời để hiển thị các tập dữ liệu phức tạp ở định dạng nhỏ gọn và hấp dẫn trực quan.

Biểu đồ Marimekko, còn được gọi là biểu đồ khảm hoặc biểu đồ mekko, là sự kết hợp giữa biểu đồ thanh xếp chồng và biểu đồ thanh xếp chồng 100%. Chiều rộng của mỗi thanh biểu thị tổng giá trị của danh mục tương ứng và chiều cao của mỗi thanh biểu thị mức đóng góp tương đối của từng danh mục phụ vào tổng số đó.

Trong hướng dẫn này, chúng ta sẽ khám phá cách tạo biểu đồ Marimekko bằng Chart.js, một thư viện biểu đồ mạnh mẽ. Chúng ta sẽ đi sâu vào chi tiết về cách cấu trúc dữ liệu cho biểu đồ Marimekko, cũng như cách tùy chỉnh giao diện và hành vi của biểu đồ bằng cách sử dụng các tùy chọn và API của Chart.js.

Mục lục:

• Bắt đầu
• Cách cấu trúc dữ liệu cho biểu đồ Marimekko
• Cách tạo Biểu đồ Marimekko với Chart.js
• Phần kết luận

Bắt đầu

Tôi giả định rằng bạn đã quen với việc tạo biểu đồ thanh và đường đơn giản bằng cách sử dụng Chart.js trong ứng dụng Angular. Trong hướng dẫn này, có một số khái niệm sẽ dễ hiểu hơn nếu bạn đã có kiến ​​thức trước đó.

Cách cấu trúc dữ liệu cho biểu đồ Marimekko

Hãy thảo luận về cấu trúc dữ liệu cần thiết cho biểu đồ Marimekko trước khi tạo biểu đồ.

Biểu đồ Marimekko cần một mảng các đối tượng, với mỗi đối tượng đại diện cho một danh mục. Mỗi đối tượng phải có một nhãn và một mảng phụ của các đối tượng, trong đó mỗi đối tượng phụ đại diện cho một danh mục phụ.

Mỗi đối tượng con phải có một nhãn và một giá trị. Giá trị đại diện cho tỷ lệ của danh mục phụ so với tổng danh mục của nó.

Dưới đây là ví dụ về cách cấu trúc dữ liệu cho biểu đồ Marimekko:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

Trong ví dụ này, chúng tôi có hai danh mục: Danh mục 1 và Danh mục 2, mỗi danh mục có ba danh mục con. Các giá trị cho các danh mục con biểu thị tỷ lệ của danh mục con so với tổng danh mục của nó. Ví dụ: trong Danh mục 1, Danh mục con 1 đại diện cho 10 trên 60 hoặc 16,7% tổng số.

Cách tạo Biểu đồ Marimekko với Chart.js

Bây giờ, chúng ta đã có cấu trúc dữ liệu chính xác, hãy chuyển sang tạo biểu đồ Marimekko bằng Chart.js.

Trước tiên, chúng ta cần tạo một phần tử canvas trong mã HTML của mình để giữ biểu đồ:

<canvas id="marimekkoChart"></canvas>

Tiếp theo, chúng ta sẽ cần cài đặt Chart.js và nhập nó vào thành phần Angular của chúng ta:

npm install chart.js

import Chart from 'chart.js/auto';

Trong lớp thành phần của chúng tôi, sau đó chúng tôi có thể tạo một đối tượng Biểu đồ mới và chuyển vào dữ liệu và các tùy chọn của mình:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

Trong ví dụ này, chúng tôi đang tạo biểu đồ Marimekko với ba danh mục con cho hai danh mục. Chúng tôi đã đặt loại biểu đồ thành 'thanh' và chúng tôi đang chuyển dữ liệu và tùy chọn của mình. Tùy chọn 'indexAxis' được đặt thành 'y' để làm cho biểu đồ nằm ngang và tùy chọn 'chú giải' được đặt để định vị chú giải ở cuối biểu đồ.

Chúc mừng! Nếu bạn đã theo dõi cẩn thận thì bạn sẽ không gặp phải bất kỳ lỗi nào và đầu ra của bạn có thể giống như sau:

Và thế là xong! Với mã này, chúng ta có thể tạo biểu đồ Marimekko trong Chart.js trong Angular.

Bạn có thể tùy chỉnh thêm biểu đồ của mình bằng cách sử dụng các tùy chọn và API khác nhau của Chart.js, chẳng hạn như điều chỉnh màu sắc, nhãn và hành vi của chú giải công cụ để làm cho biểu đồ có nhiều thông tin và hấp dẫn hơn.

Phần kết luận

Chart.js là một thư viện rất hữu ích và mạnh mẽ. Trong hướng dẫn nhanh này, chúng tôi đã giới thiệu cách tạo biểu đồ Marimekko trong Chart.js ở Angular. Nếu bạn muốn đưa bất kỳ loại biểu đồ nào vào ứng dụng Angular của mình, thì rất dễ dàng để tạo chúng với Chart.js.

Mã đầy đủ cho ứng dụng Góc này được lưu trữ trên GitHub Repo của tôi .

Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích và nhiều thông tin.

Nguồn: https://www.freecodecamp.org

#angular #chartjs 

How to Create a Marimekko Chart using Chart.js in Angular

Learn how to create a Marimekko chart using Chart.js in Angular. We'll delve into the details of how to structure the data for Marimekko charts, and how to customize the chart's appearance and behavior using Chart.js options and APIs.

Data visualization is an essential part of data analysis. And charts are one of the most effective ways to present data in a clear and concise manner.

Marimekko charts are an excellent choice for displaying complex data sets in a compact and visually appealing format.

A Marimekko chart, also known as a mosaic chart or mekko chart, is a combination of a stacked bar chart and a 100% stacked bar chart. The width of each bar represents the total value of the corresponding category, and the height of each bar represents the relative contribution of each sub-category to that total.

In this tutorial, we will explore how to create a Marimekko chart using Chart.js, a powerful charting library. We'll delve into the details of how to structure the data for Marimekko charts, as well as how to customize the chart's appearance and behavior using Chart.js options and APIs.

Table of contents:

• Getting Started
• How to Structure Data for Marimekko Charts
• How to Create a Marimekko Chart with Chart.js
• Conclusion

Getting Started

I am assuming that you already have familiarity with creating simple line and bar charts using Chart.js in an Angular application. In this guide, there are certain concepts that will be easier to comprehend if you have prior knowledge.

How to Structure Data for Marimekko Charts

Let's discuss the data structure required for Marimekko charts before creating the chart.

Marimekko charts need an array of objects, with each object representing a category. Each object must have a label and a sub-array of objects, where each sub-object represents a sub-category.

Each sub-object must have a label and a value. The value represents the proportion of the sub-category in relation to the total of its category.

Here's an example of how to structure data for a Marimekko chart:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

In this example, we have two categories: Category 1 and Category 2, with three subcategories each. The values for the subcategories represent the proportion of the subcategory in relation to the total of its category. For example, in Category 1, Subcategory 1 represents 10 out of 60, or 16.7% of the total.

How to Create a Marimekko Chart with Chart.js

Now that we have our data structured correctly, let's move on to creating our Marimekko chart using Chart.js.

First, we need to create a canvas element in our HTML code to hold the chart:

<canvas id="marimekkoChart"></canvas>

Next, we'll need to install Chart.js and import it into our Angular component:

npm install chart.js

import Chart from 'chart.js/auto';

In our component class, we can then create a new Chart object and pass in our data and options:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

In this example, we're creating a Marimekko chart with three subcategories for two categories. We've set the type of chart to 'bar', and we're passing in our data and options. The 'indexAxis' option is set to 'y' to make the chart horizontal, and the 'legend' option is set to position the legend at the bottom of the chart.

Congratulations! If you have followed along carefully then you shouldn’t run into any errors and your output may look like the following:

And that's it! With this code, we can create a Marimekko chart in Chart.js in Angular.

You can further customize your chart using various Chart.js options and APIs, such as adjusting the colors, labels, and tooltip behaviors, to make it even more informative and engaging.

Conclusion

Chart.js is a very useful and powerful library. In this quick tutorial, we've covered how to create a Marimekko chart in Chart.js in Angular. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful and informative.

Source: https://www.freecodecamp.org

#angular #chartjs 

Add the Chart.js Zoom Plugin to an Angular Application

In this tutorial, you will learn how to the Add Chart.js Zoom plugin to an Angular application. Chart.js is an open-source library you can use to create beautiful charts in any part of your Angular application.

When you have a lot of data in a chart, you may want to zoom in and see the details. Line charts are a good way to visualise large amounts of data. You can use the zooming feature in Chart.js to explore your data more closely.

Chart.js is an open-source library you can use to create beautiful charts in any part of your Angular application. The Zooming feature was created to allow you to magnify certain data points for closer inspection. You can quickly and easily zoom by scrolling with the mouse wheel.

Let's see how it works.

Getting Started

I'm going to assume that you already know how to use Chart.js in an Angular application to create simple line and bar charts.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

We will create a new Angular component just for the line chart and then incorporate the zoom plugin into it. We will be using a large amount of data to see how useful the Zoom plugin is.

But first, in your Angular application, you'll need to install the Chart.js Zoom plugin if you don't already have it.

Open up a new terminal in the Angular project folder and paste in the following command:

npm install chartjs-plugin-zoom

This will install the plugin into your Angular application.

Now let’s create a new Angular component and make the line chart. Use the following to create a new Angular component:

ng g c line-chart

This will create a new Angular component in the /src directory.

Then open the line-chart.component.html file and paste in the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

Now open the line-chart.component.ts file and delete all the code inside it. Then paste in the following code:

import { Component, OnInit } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.createChart();
  }
  public chart: any;

  createChart() {

    this.chart = new Chart("MyChart", {
      type: 'line', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        datasets: [
          {
            label: "Sales",
            data: ['467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573', ],
            backgroundColor: 'blue',
            borderColor: "#084de0"
          }
        ]
      },
      options: {
        aspectRatio: 3
      }

    });
  }

}

Again, if you don’t know how this code works, you can always refer back to this Chart.js Tutorial.

We need to add the HTML selector of the line-chart component to the app.component.html file. Remove the initial template code of Angular and add the following:

<app-line-chart></app-line-chart>

Start the local development server using the following command:

ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application.

As you can see, in order to present the entire chart, this graph begins to skip some labels. It will seem more worse if the graph has more data.

Let's now add a zooming function to our chart so we can enlarge the data points for a closer look.

How to Add the Chart.js Zoom Plugin

Open the line-chart.component.ts file and import the chart.js Zoom plugin. Make sure you register it after importing it. The following code will show you how to do it:

import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

Now that you have imported the plugin, in the Chart.js option we will add the plugin and enable the zoom on the wheel.

options: {
        aspectRatio: 3,
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
              mode: 'xy',
            }
          }
        }
      }

As you can see , now we can zoom in into the point we want to see closely.

Wrapping Up

The full code for this Angular application is hosted on my GitHub.

Thank you for reading!

Original article source at https://www.freecodecamp.org

#angular #chartjs 

Create a Pie and Doughnut Chart in an Angular App with Chart.js

In this Chart.js tutorial, you will learn how to create a simple pie and doughnut chart using the Chart.js library in an Angular application. 

What is Chart.js?

Chart.js is a JavaScript library for building charts. It's designed to be intuitive and simple, but it's powerful enough to build complex visualizations.

It has a wide range of chart types, including bar charts, line charts, pie charts, scatter plots, and many more. Chart.js is open-source and can be used without any restrictions on private or commercial projects.

Prerequisites

Before we get started with making the charts, just make sure you meet the following prerequisites:

• Basic understanding of HTML /CSS and TypeScript especially the understanding of Object Oriented concepts of TypeScript classes and methods.
• Node.js version 10 or higher and NPM or Yarn package manager. You can download node.js from here.

How to Install Angular CLI

We will be using the Angular CLI to generate a starter application for our project. You can install Angular CLI by executing the following command on a terminal or Powershell window:

npm install -g @angular/cli

If you have Angular CLI installed already, you can skip this step.

How to Create a Angular Application

Now let’s create an Angular application that will hold our graphs. In a terminal, execute the following commands:

 ng new angular-chartjs

Now that our Angular application has been created, navigate to the project folder and start the local development server using the following command:

cd angular-chartjs
ng serve -o

A browser window will open on http://localhost:4200/  and you can see your running Angular application.

How to Install the Chart.js Package

Now open a new terminal window in the same directory and install the Chart.js library using the following:

npm install chart.js

Now we need to create two Angular components, one for the Pie graph and the other for the Doughnut chart. You can create them easily with the angular CLI by executing the following commands:

ng generate component pie-chart
ng generate component doughnut-chart

How to Create a Pie Chart in Chart.js

A pie chart is a circular graph that displays data in slices, where each slice represents a category of data. The size of each slice represents the proportion of the category in relation to the whole data set.

Pie charts are an effective way to show the breakdown of data into categories, especially when the data represents parts of a whole. They are useful when you want to show how much each category contributes to the total.

When to use pie charts:

• To show the proportions of different categories in a whole
• To compare the relative sizes of different categories
• To demonstrate how each category contributes to the whole

Pie charts are commonly used in business and economics to show the distribution of expenditures, market shares, or other aspects of the company's performance.

Now that we have created the components, we will move on with creating the pie chart.

Navigate to the /src/app/pie-chart component and open the pie-chart.component.html file and paste the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

We have simply created a container, and inside that container a canvas with an id of MyChart. We have used Angular’s string interpolation to render the chart variable, which we will create soon.

Inside the pie-chart component, open the pie-chart.component.ts file and import the Chart.js library using the following command:

import Chart from 'chart.js/auto';

Now let’s make the chart variable we mentioned earlier. This variable will hold the information of our graphs.

public chart: any;

Now we will create a method for the pie chart. This will include the data and labels for our chart.  

Copy the following code and paste it in the pie-chart.component.ts file below the ngOnInit() function:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'pie', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['Red', 'Pink','Green','Yellow','Orange','Blue', ],
	       datasets: [{
    label: 'My First Dataset',
    data: [300, 240, 100, 432, 253, 34],
    backgroundColor: [
      'red',
      'pink',
      'green',
			'yellow',
      'orange',
      'blue',			
    ],
    hoverOffset: 4
  }],
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Here we have set the type of chart as pie. We have given labels as the names of common colors. And we've added data values, which will be automatically allocated a portion of pie in the pie chart.

We want our createChart() function to run as soon as the page loads. In order to do that, we need to call the function in the ngOnInit():

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the pie-chart component to the app.component.html  file. Remove the initial template code of Angular and add the following:

<app-pie-chart></app-pie-chart>

Save all the files and the browser window will refresh automatically. Your first pie chart is ready!

Our pie chart

How to Create a Doughnut Chart in Chart.js

A doughnut chart is a variation of the pie chart and serves the same purpose of representing data in a circular format. It is made up of multiple sectors, where each sector represents a data value, with the size of each sector proportional to its value.

You can use a doughnut chart:

• To show a parts-to-whole relationship in data
• To compare different categories of data
• To show progress towards a goal or target

Now we will move on with creating the doughnut chart. Since Doughnut charts and Pie charts can be used interchangeably, we don’t need to modify anything except the type of chart. Just follow the same steps  you have done so far and make sure to do them on the doughnut chart component.

Paste the same code for createChart() method on the doughnut-chart.component.ts file below the ngOnInit() function. You just need to change the keyword for type of chart from pie to doughnut. Your code should look like the following:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'doughnut', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['Red', 'Pink','Green','Yellow','Orange','Blue', ],
	       datasets: [{
    label: 'My First Dataset',
    data: [300, 240, 100, 432, 253, 34],
    backgroundColor: [
      'red',
      'pink',
      'green',
			'yellow',
      'orange',
      'blue',			
    ],
    hoverOffset: 4
  }],
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Call the createChart() function in ngOnInit() and your line chart will be ready.

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector for the line-chart component to the app.component.html file.

<app-doughnut-chart></app-doughnut-chart>

Your output may look like the following:

Our doughnut chart

Conclusion

Chart.js is a very useful and powerful library. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful. Thank you for reading!

Original article source at https://www.freecodecamp.org

#angular #chartjs 

How to Set Chart Size with ChartJS

To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive.

Below is a chart that fills its container, which happens to be the exact width of the text container for Mastering JS.

Below is the HTML for the above chart.

<style>
  #chart-wrapper {
    display: inline-block;
    position: relative;
    width: 100%;
  }
</style>
<div id="chart-wrapper">
  <canvas id="chart"></canvas>
</div>

Below is the JavaScript for the chart:

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Easy as',
      data: [1, 2, 3],
    }],
  },
  options: {
    responsive: true
  }
});

Original article source at: https://masteringjs.io

#chartjs 

How to Set Axis Label Color in ChartJS

With ChartJS 3, you can change the color of the labels by setting the scales.x.ticks.color and scales.y.ticks.color options. For example, below is how you can make the Y axis labels green and the X axis labels red.

Note that the below doesn't work in ChartJS 2.x, you need to use ChartJS 3.

const ctx = document.getElementById('chart').getContext('2d');

const chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',
    data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
        label: 'Example Data',
        data: [12, 19, 3, 5, 2, 3],
    }]
  },
  // Configuration options go here
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: { color: 'green', beginAtZero: true }
      },
      x: {
        ticks: { color: 'red', beginAtZero: true }
      }
    }
  }
});

Below is a live example.

You can use any color format supported by ChartJS, including hex codes. For example, below is an alternative approach for setting the Y axis ticks to red and X axis ticks to green.

options: {
  responsive: true,
  scales: {
    y: {
      ticks: { color: '#00ff00', beginAtZero: true }
    },
    x: {
      ticks: { color: '#ff0000', beginAtZero: true }
    }
  }
}

Original article source at: https://masteringjs.io

#chartjs