Пользовательские смешанные линии и гистограммы в ионном - PullRequest
Новая
       13

Пользовательские смешанные линии и гистограммы в ионном

0 голосов
/ 15 апреля 2019

Я новичок в ionic, мне нужно реализовать диаграмму в моем приложении.Я попробовал библиотеку chart.js, Amcharts и т. Д., Которая доступна в ionic для диаграмм, но я не могу настроить диаграмму.

Я попробовал код библиотеки AmChart и поделился фрагментом кода - 

this.chart = this.AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "none",
            "autoMargins": false,
            "marginLeft": 30,
            "marginRight": 8,
            "marginTop": 10,
            "marginBottom": 26,
            "dataProvider": [{
                "year": 2009,
                "income": 23.5,
                "expenses": 21.1
            }, {
                "year": 2010,
                "income": 26.2,
                "expenses": 30.5
            }, {
                "year": 2011,
                "income": 30.1,
                "expenses": 34.9
            }, {
                "year": 2012,
                "income": 29.5,
                "expenses": 31.1
            }],
            "valueAxes": [{
                "axisAlpha": 0,
                "position": "left"
            }],
            "startDuration": 1,
            "graphs": [{
                "alphaField": "alpha",
                "fillAlphas": 1,
                "title": "Income",
                "type": "column",
                "valueField": "income",
            }, {
                "id": "graph2",
                "bullet": "round",
                "lineThickness": 3,
                "bulletSize": 7,
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "useLineColorForBulletBorder": true,
                "bulletBorderThickness": 3,
                "fillAlphas": 0,
                "lineAlpha": 1,
                "title": "Expenses",
                "valueField": "expenses",
            }],
            "categoryField": "year",
            "categoryAxis": {
                "axisAlpha": 0,
                "tickLength": 0
            },
            "export": {
                //"enabled": true
            },
            "gridColor": '#ffffff'
        });

Ожидаемый результат - https://drive.google.com/file/d/1vFw1b_66tZw8V5fih8_YpI2set64my3F/view?usp=sharing

Фактический результат - https://drive.google.com/file/d/1evPPjUP8m1wUlrYiESjMJDlSjIDJH9pG/view?usp=sharing

Любая помощь будет оценена.

...