根据amcharts中的条件隐藏类别字段

时间:2018-09-22 06:45:00

标签: javascript angularjs amcharts

我想根据一个条件在amcharts中隐藏一个类别字段,每当条件失败时,我都想将其显示回来。有人可以帮助我吗?我要发布一张我想根据一个条件隐藏质量字段的图表。预先感谢...

var chart = AmCharts.makeChart('zoomAxisChart', {
                "type": "serial",
                "theme": "none",
                "hideCredits": true,
                "color": layoutColors.defaultText,
                "dataDateFormat": "YYYY/MM/DD JJ:NN",
                "precision": 2,
                "valueAxes": [{
                    color: layoutColors.defaultText,
                    axisColor: layoutColors.defaultText,
                    gridColor: layoutColors.defaultText,
                    "id": "v1",
                    "title": "percentage",
                    "position": "left",
                    "autoGridCount": false,
                    "labelFunction": function (value) {
                        return "" + Math.round(value) + "";
                    }
                }
                ],
                "graphs": [{
                    "id": "g1",
                    "valueAxis": "v1",
                    "bullet": "round",
                    "bulletBorderAlpha": 1,
                    "bulletColor": layoutColors.defaultText,
                    color: layoutColors.defaultText,
                    "bulletSize": 5,
                    "hideBulletsCount": 50,
                    "lineAlpha": 0.8,
                    "type": "smoothedLine",
                    "title": " Quality",
                    "valueField": "Quality",
                    "labelsEnabled":false,
                    "clustered": false,
                    "lineThickness": 2,
                    "lineColor": layoutColors.info,
                    "legendValueText": "[[value]]",
                    "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
                },
                    {
                        "id": "g2",
                        "valueAxis": "v1",
                        "bullet": "round",
                        "bulletBorderAlpha": 1,
                        "bulletColor": layoutColors.defaultText,
                        color: layoutColors.defaultText,
                        "bulletSize": 5,
                        "hideBulletsCount": 50,
                        "lineAlpha": 0.8,
                        "type": "smoothedLine",
                        "title": "Availability",
                        "valueField": "Availability",
                        "clustered": false,
                        "lineThickness": 2,
                        "lineColor": layoutColors.success,
                        "legendValueText": "[[value]]",
                        "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
                    },
                {
                    "id": "g3",
                    "valueAxis": "v1",
                    "bullet": "round",
                    "bulletBorderAlpha": 1,
                    "bulletColor": layoutColors.defaultText,
                    color: layoutColors.defaultText,
                    "bulletSize": 5,
                    "hideBulletsCount": 50,
                    "lineAlpha": 0.8,
                    "type": "smoothedLine",
                    "title": "Performance",
                    "valueField": "Performance",
                    "clustered": false,
                    "lineThickness": 2,
                    "lineColor": layoutColors.warning,
                    "legendValueText": "[[value]]",
                    "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
                },
                {
                    "id": "g4",
                    "valueAxis": "v1",
                    "bullet": "round",
                    "bulletBorderAlpha": 1,
                    "bulletColor": layoutColors.defaultText,
                    color: layoutColors.defaultText,
                    "bulletSize": 5,
                    "hideBulletsCount": 50,
                    "lineAlpha": 0.8,
                    "type": "smoothedLine",
                    "title": "OEE",
                    "valueField": "OEE",
                    "clustered": false,
                    "lineThickness": 2,
                    "lineColor": layoutColors.primary,
                    "legendValueText": "[[value]]",
                    "balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
                }
               ],
                "chartScrollbar": {
                    "graph": "g2",
                    "oppositeAxis": false,
                    "offset": 30,
                    gridAlpha: 0,
                    color: layoutColors.defaultText,
                    scrollbarHeight: 50,
                    backgroundAlpha: 0,
                    selectedBackgroundAlpha: 0.05,
                    selectedBackgroundColor: layoutColors.defaultText,
                    graphFillAlpha: 0,
                    autoGridCount: true,
                    selectedGraphFillAlpha: 0,
                    graphLineAlpha: 0.2,
                    selectedGraphLineColor: layoutColors.defaultText,
                    selectedGraphLineAlpha: 1
                },
                "chartCursor": {
                    "pan": true,
                    "cursorColor": layoutColors.danger,
                    "valueLineEnabled": true,
                    "valueLineBalloonEnabled": true,
                    "cursorAlpha": 0,
                    "valueLineAlpha": 0.2
                },
                "categoryField": "DateTimeValue",
                "categoryAxis": {
                    "axisColor": layoutColors.defaultText,
                    "color": layoutColors.defaultText,
                    "gridColor": layoutColors.defaultText,
                    "parseDates": true,
                    "dashLength": 1,
                    "dateFormats": [{
                        "period": 'fff',
                        "format": 'JJ:NN:SS'
                    }, {
                        "period": 'ss',
                        "format": 'JJ:NN:SS'
                    }, {
                        "period": 'mm',
                        "format": 'JJ:NN'
                    }, {
                        "period": 'hh',
                        "format": 'JJ:NN'
                    }, {
                        "period": 'DD',
                        "format": 'DD'
                    }, {
                        "period": 'WW',
                        "format": 'DD'
                    }, {
                        "period": 'MM',
                        "format": 'MMM'
                    }, {
                        "period": 'YYYY',
                        "format": 'YYYY'
                    }],
                    "minPeriod": "hh",
                    "minorGridEnabled": true
                },
                "legend": {
                    "useGraphSettings": true,
                    "position": "top",
                    "color": layoutColors.defaultText,
                    "autoMargins": false,
                    "valueWidth": 90
                },
                "balloon": {
                    "borderThickness": 1,
                    "shadowAlpha": 0
                },
                "export": {
                    "enabled": true,
                    "fileName": "OEEReport" + "," + new Date().toLocaleString()
                },
                "dataProvider": $scope.OeeData,
                pathToImages: layoutPaths.images.amChart
}

请问有人可以根据条件在图表中隐藏和显示Quality领域吗?

0 个答案:

没有答案