4 лучших угловых диаграммы для выявления тенденций с течением времени

Анализ тенденций используется для прогнозирования будущих результатов на основе записанных данных. Диаграммы играют жизненно важную роль в анализе тенденций с течением времени. Их графическое представление облегчает быстрое понимание сложных фактов. Тем не менее, вы должны выбрать подходящий тип диаграммы, чтобы точно и эффективно передать историю данных.

В этом блоге мы изучаем различные угловые диаграммы Syncfusion, чтобы найти лучшие типы диаграмм для выявления тенденций в ваших данных временных рядов.

Линейный график

Линейный график показывает тенденции с течением времени и может отображать широкий спектр данных. Мы можем использовать линейную диаграмму при построении непрерывного набора данных. Это наиболее распространенный тип диаграммы, используемый для отображения тенденций с большими объемами данных.

В следующем примере я использую ряды линий, чтобы показать тенденцию производства нерафинированной стали в разных странах. В этом случае ось x показывает значение времени, а ось y показывает количество произведенной нерафинированной стали. В первый год большая часть производства составляла менее 8 миллионов метрических тонн, но со временем производство увеличивалось, и большинство стран производили более 8 миллионов метрических тонн в год.

См. следующий пример кода.

app.component.html

<ejs-chart id='chartcontainer' [title]='title' >
    <e-series-collection>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Viet_Growth' name='Vietnam' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Can_Growth' name='Canada' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Mal_Growth' name='Malaysia' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Egy_Growth' name='Egypt' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Ind_Growth' name='Indonesia' width=2 opacity=1> </e-series>
    </e-series-collection>
</ejs-chart>

app.component.ts

export class AppComponent {
    public data: Object[] = [
        { Period : 2012, Can_Growth : 13.5, Viet_Growth : 5.3, Mal_Growth : 5.6, Egy_Growth : 6.6, Ind_Growth : 2.3 },
        { Period : 2013, Can_Growth : 12.4, Viet_Growth : 5.6, Mal_Growth : 4.7, Egy_Growth : 6.8, Ind_Growth : 2.6 },
        { Period : 2014, Can_Growth : 12.7, Viet_Growth : 5.9, Mal_Growth : 4.3, Egy_Growth : 6.5, Ind_Growth : 4.4 },
        { Period : 2015, Can_Growth : 12.5, Viet_Growth : 5.7, Mal_Growth : 3.8, Egy_Growth : 5.5, Ind_Growth : 4.9 },
        { Period : 2016, Can_Growth : 12.7, Viet_Growth : 7.8, Mal_Growth : 2.8, Egy_Growth : 5.0, Ind_Growth : 4.8 },
        { Period : 2017, Can_Growth : 13.7, Viet_Growth : 10.3, Mal_Growth : 2.8, Egy_Growth : 6.8, Ind_Growth : 5.3 },
        { Period : 2018, Can_Growth : 13.4, Viet_Growth : 15.5, Mal_Growth : 4.1, Egy_Growth : 7.8, Ind_Growth : 6.2  },
        { Period : 2019, Can_Growth : 12.9, Viet_Growth : 17.5, Mal_Growth : 6.8, Egy_Growth : 7.3, Ind_Growth : 7.8 },
        { Period : 2020, Can_Growth : 11.0, Viet_Growth : 19.5, Mal_Growth : 7.1, Egy_Growth : 8.2, Ind_Growth : 9.3 }
    ];
    public title: string = 'Crude Steel Production';
}

Ресурсы для линейных диаграмм

Столбчатая диаграмма

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

В этом примере на столбчатой диаграмме показаны годовые темпы роста ВВП двух стран с 2015 по 2021 год. ВВП США имел тенденцию к снижению до значительного роста в 2021 году, а ВВП Индии с годами сокращался и немного увеличивался, пока в 2021 году не произошел резкий скачок, аналогичный американскому. .

См. следующий пример кода.

app.component.html

<ejs-chart [title]='title'>
    <e-series-collection>
        <e-series [dataSource]='data' type='Column' xName='Period' yName='Ind_Growth' name='India'> </e-series>
        <e-series [dataSource]='data' type='Column' xName='Period' yName='US_Growth' name='US'> </e-series>
    </e-series-collection>
</ejs-chart>

app.component.ts

export class AppComponent {    
    public data: Object[] = [
        { Period : 2015, Ind_Growth : 8, US_Growth : 2.7, },
        { Period : 2016, Ind_Growth : 8.3, US_Growth : 1.7, },
        { Period : 2017, Ind_Growth : 6.8, US_Growth : 2.3, },
        { Period : 2018, Ind_Growth : 6.5, US_Growth : 2.9,  },
        { Period : 2019, Ind_Growth : 3.7, US_Growth : 2.3, },
        { Period : 2021, Ind_Growth : 8.3, US_Growth : 5.7, }
    ];
    
    public title: string = 'GDP growth (annual %)';
}

Ресурсы столбчатой диаграммы

Пузырьковая диаграмма

Данные с тремя измерениями могут быть представлены с помощью пузырьковых диаграмм. Требуются три входных данных: значение x, значение y и значение размера пузырька. Эти диаграммы можно использовать, когда вам нужно предоставить пользователям больше информации вместе с тенденцией данных.

На этом рисунке количество продаж двух продуктов с 2000 по 2020 год отображается вместе с доходом от этих продаж. В 2012 году продукт А продавался лучше, чем продукт Б, но продукт Б приносил гораздо больший доход, о чем свидетельствует размер его пузырьков.

См. следующий пример кода.

app.component.html

<ejs-chart [title]='title'>
    <e-series-collection>
        <e-series [dataSource]='data' pointColorMapping="color" type='Bubble' size="TotalRevenue" xName='Period' yName='Sale' name='Product A'> </e-series>
        <e-series [dataSource]='data2' pointColorMapping="color" type='Bubble' size="TotalRevenue" xName='Period' yName='Sale' name='Product B'> </e-series>
    </e-series-collection>
</ejs-chart>

app.component.ts

export class AppComponent {
    public data: Object[] = [
        { Period : 2000, TotalRevenue: 23, color: '#f5ccff', Sale : 37, },
        { Period : 2004, TotalRevenue: 101, color: '#e580ff', Sale : 36, },
        { Period : 2008, TotalRevenue: 142, color: '#db4dff', Sale : 36, },
        { Period : 2012, TotalRevenue: 204, color: '#d633ff', Sale : 47,  },
        { Period : 2016, TotalRevenue: 541, color: '#d11aff', Sale : 46, },
        { Period : 2020, TotalRevenue: 110, color: '#cc00ff', Sale : 39, }
    ];
    public data2: Object[] = [
        { Period : 2000, TotalRevenue: 13, color: '#ffe0cc', Sale : 28, },
        { Period : 2004, TotalRevenue: 63, color: '#ffb380', Sale : 32, },
        { Period : 2008, TotalRevenue: 100, color: '#ff6600', Sale : 48, },
        { Period : 2012, TotalRevenue: 92, color: '#ff751a', Sale : 39,  },
        { Period : 2016, TotalRevenue: 70, color: '#ff944d', Sale : 26, },
        { Period : 2020, TotalRevenue: 39, color: '#ffd1b3', Sale : 38, }
    ];
     
    public title: string = 'Product Sales';
}

Ресурсы пузырьковой диаграммы

Диаграмма с областями с накоплением

Диаграмма с областями с накоплением помогает обнаруживать и сравнивать тенденции по различным факторам. Одна диаграмма может показать, как значения нескольких рядов изменились с течением времени. Вы можете использовать диаграмму с областями с накоплением, если хотите отслеживать не только общее значение, но и то, как это общее значение разбивается на участников.

В следующем примере я проиллюстрировал сумму дохода, полученного различными способами оплаты за год. Каждый тип платежа — наличные, кредитная карта, дебетовая карта и банковский перевод — нанесен друг на друга для составления итоговой суммы.

См. следующий пример кода.

App.component.html

<ejs-chart >
    <e-series-collection>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’OrganicSales’ name=’Bank Transfer’ [border]=’border’> </e-series>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’FairTradeSales’ name=’Credit Card’ [border]=’border’> </e-series>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’VegAlternativesSales’ name=’Debit Card’ [border]=’border’> </e-series>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’OtherSales’ name=’Cash’ [border]=’border’> </e-series>
    </e-series-collection>
</ejs-chart>

app.component.ts

export class AppComponent {public chartArea: Object = {
    border: {
        width: 0
    }
};
public width: string = ‘75%’;
public data: Object[] = [
    { Period : new Date(2000, 1, 1), OrganicSales : 0.61, FairTradeSales : 0.03, VegAlternativesSales : 0.48, OtherSales : 0.23 },
    { Period : new Date(2002, 1, 1), OrganicSales : 0.91, FairTradeSales : 0.06, VegAlternativesSales : 0.57, OtherSales : 0.17 },
    { Period : new Date(2004, 1, 1), OrganicSales : 1.19, FairTradeSales : 0.14, VegAlternativesSales : 0.63, OtherSales : 0.23 },        
    { Period : new Date(2006, 1, 1), OrganicSales : 1.74, FairTradeSales : 0.29, VegAlternativesSales : 0.66, OtherSales : 0.43 },        
    { Period : new Date(2008, 1, 1), OrganicSales : 1.99, FairTradeSales : 0.64, VegAlternativesSales : 0.77, OtherSales : 0.72 },        
    { Period : new Date(2010, 1, 1), OrganicSales : 1.48, FairTradeSales : 1.06, VegAlternativesSales : 0.54, OtherSales : 1.38 },        
    { Period : new Date(2012, 1, 1), OrganicSales : 1.66, FairTradeSales : 1.55, VegAlternativesSales : 0.61, OtherSales : 2.16 },        
    { Period : new Date(2014, 1, 1), OrganicSales : 1.67, FairTradeSales : 1.65, VegAlternativesSales : 0.67, OtherSales : 2.61 }
];
 
public title: string = ‘Amount of Sales by Payment Method’;
}

Ресурсы для диаграммы с областями с накоплением

Заключение

В этом блоге мы обсудили четыре различных диаграммы Angular, которые идеально подходят для отображения трендов во времени. Попробуйте Syncfusion Angular Charts и дайте нам знать, что вы думаете в разделе комментариев ниже. Если вы не являетесь разработчиком Angular, ознакомьтесь с нашим компонентом Charts для других платформ, в том числе:

Просмотрите нашу документацию, чтобы узнать больше о других виджетах Angular.

Вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 14 марта 2023 г.

4 лучших угловых диаграммы для выявления тенденций с течением времени