Создайте комбинированную диаграмму, используя ngx-диаграммы

Мне нужна комбинированная диаграмма между Stacked Bar Chart и Line Bar Chart, не могли бы вы мне помочь с некоторым примером. Я читал этот документ: Демонстрация комбинированных диаграмм

Но я не могу понять этого примера.


ngx-charts
person Frank Corona    schedule 14.03.2018    source источник
comment
Привет, Фрэнк! Удалось найти какие-нибудь примеры? У меня такая же проблема: ngx выпустил 10.0, и я не могу найти примеров кода на официальном сайте.   -  person E. Evsevleev    schedule 03.12.2018
comment
@ E.Evsevleev Я обнаружил некоторые проблемы с использованием этого пакета диаграмм, и наша компания решила перейти на HighCharts.   -  person Frank Corona    schedule 03.12.2018
comment
Мне удалось использовать комбинированную диаграмму, а затем обновить ее в соответствии с нашими потребностями (несколько полос и некоторые другие функции). Я выложу демо позже.   -  person E. Evsevleev    schedule 06.03.2019
comment
Спасибо, @ E.Evsevleev, держите меня в курсе.   -  person Frank Corona    schedule 07.03.2019

Ответы (1)


arrow_upward
6
arrow_downward

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

  1. Скопируйте все 4 компонента из компонента combo-chart в папку demo в репозитории ngx-charts.

    • Your folder structure will look like this:
    combo-chart
 └─ combo-chart.component.scss
 └─ combo-chart.component.ts
 └─ combo-series-vertical.component.ts
 └─ index.ts

  2. Измените импорт в двух файлах component.ts с относительных ссылок на '@ swimlane / ngx-charts'

    • С '../../src' по '@swimlane/ngx-charts'

    • С '../../src/common/label.helper' по '@swimlane/ngx-charts'

  3. Импортируйте компоненты и объявите их в своем файле module.ts

    .
import { ComboChartComponent, ComboSeriesVerticalComponent } from './combo-chart';
.
.
declarations: [
.
.
ComboChartComponent, ComboSeriesVerticalComponent],
.

  4. Теперь вы можете использовать компонент настраиваемой комбинированной диаграммы в своем шаблоне с помощью селектора <combo-chart-component>

Я создал простую суть, подробно описывающую процесс, ознакомьтесь с ней - https://gist.github.com/gabrielloye/67921cda6139ba1806920da2a7e2fcb2

Ссылка StackBlitz на рабочий пример: https://stackblitz.com/edit/ngx-charts-combo-chart

person Gabriel    schedule 20.03.2019