Chart.js 100% 堆叠条形图插件使用教程

Chart.js 100% 堆叠条形图插件使用教程

chartjs-plugin-stacked100 This plugin for Chart.js that makes your bar chart to 100% stacked bar chart. 项目地址: https://gitcode.com/gh_mirrors/ch/chartjs-plugin-stacked100

1. 项目介绍

chartjs-plugin-stacked100 是一个用于 Chart.js 的开源插件，旨在将条形图转换为 100% 堆叠条形图。该插件允许用户轻松创建堆叠条形图，并确保每个堆叠部分的总和为 100%。它支持 Chart.js v3 及以上版本，并且提供了多种配置选项，以满足不同的需求。

2. 项目快速启动

安装

你可以通过 npm 或 yarn 安装该插件：

npm install chartjs-plugin-stacked100

或

yarn add chartjs-plugin-stacked100

使用

首先，确保你已经安装了 Chart.js。然后，在你的项目中引入 Chart.js 和 chartjs-plugin-stacked100 插件：

import { Chart } from "chart.js";
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";

// 注册插件
Chart.register(ChartjsPluginStacked100);

接下来，你可以创建一个基本的 100% 堆叠条形图：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Foo', 'Bar'],
        datasets: [
            {
                label: 'bad',
                data: [5, 25],
                backgroundColor: 'rgba(244, 143, 177, 0.6)'
            },
            {
                label: 'better',
                data: [15, 10],
                backgroundColor: 'rgba(255, 235, 59, 0.6)'
            },
            {
                label: 'good',
                data: [10, 8],
                backgroundColor: 'rgba(100, 181, 246, 0.6)'
            }
        ]
    },
    options: {
        indexAxis: 'y',
        plugins: {
            stacked100: {
                enable: true
            }
        }
    }
});

3. 应用案例和最佳实践

案例1：数据标签插件结合使用

你可以将 chartjs-plugin-stacked100 与 chartjs-plugin-datalabels 插件结合使用，以在图表中显示百分比数据标签：

import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Foo', 'Bar'],
        datasets: [
            {
                label: 'bad',
                data: [5, 25],
                backgroundColor: 'rgba(244, 143, 177, 0.6)'
            },
            {
                label: 'better',
                data: [15, 10],
                backgroundColor: 'rgba(255, 235, 59, 0.6)'
            },
            {
                label: 'good',
                data: [10, 8],
                backgroundColor: 'rgba(100, 181, 246, 0.6)'
            }
        ]
    },
    options: {
        indexAxis: 'y',
        plugins: {
            stacked100: {
                enable: true
            },
            datalabels: {
                formatter: (value, context) => {
                    const data = context.chart.data;
                    const datasetIndex = context.datasetIndex;
                    const dataIndex = context.dataIndex;
                    const rateValue = data.calculatedData[datasetIndex][dataIndex];
                    return `${rateValue}%`;
                }
            }
        }
    }
});

案例2：React 中使用

在 React 项目中使用 chartjs-plugin-stacked100 插件：

import React from 'react';
import { Chart, Bar } from 'react-chartjs-2';
import ChartjsPluginStacked100 from 'chartjs-plugin-stacked100';

Chart.register(ChartjsPluginStacked100);

const ChartData = () => {
    return (
        <div>
            <Bar
                data={{
                    labels: ['Foo', 'Bar'],
                    datasets: [
                        {
                            label: 'bad',
                            data: [5, 25],
                            backgroundColor: 'rgba(244, 143, 177, 0.6)'
                        },
                        {
                            label: 'better',
                            data: [15, 10],
                            backgroundColor: 'rgba(255, 235, 59, 0.6)'
                        },
                        {
                            label: 'good',
                            data: [10, 8],
                            backgroundColor: 'rgba(100, 181, 246, 0.6)'
                        }
                    ]
                }}
                options={{
                    indexAxis: 'y',
                    plugins: {
                        stacked100: {
                            enable: true
                        }
                    }
                }}
            />
        </div>
    );
};

export default ChartData;

4. 典型生态项目

Chart.js

chartjs-plugin-stacked100 是基于 Chart.js 开发的插件。Chart.js 是一个流行的开源图表库，支持多种图表类型，如条形图、折线图、饼图等。Chart.js 提供了丰富的 API 和插件系统，使得开发者可以轻松扩展和定制图表功能。

chartjs-plugin-datalabels

chartjs-plugin-datalabels 是另一个与 Chart.js 兼容的插件，用于在图表中显示数据标签。通过结合 chartjs-plugin-stacked100 和 chartjs-plugin-datalabels，开发者可以创建带有百分比数据标签的 100% 堆叠条形图，从而增强图表的可读性和信息传达效果。

react-chartjs-2

react-chartjs-2 是一个用于在 React 项目中集成 Chart.js 的库。它提供了 React 组件，使得开发者可以在 React 应用中轻松使用 Chart.js 创建图表。结合 chartjs-plugin-stacked100，开发者可以在 React 项目中创建 100% 堆叠条形图，并享受 React 的组件化开发优势。

chartjs-plugin-stacked100 This plugin for Chart.js that makes your bar chart to 100% stacked bar chart. 项目地址: https://gitcode.com/gh_mirrors/ch/chartjs-plugin-stacked100