amCharts angular 指令无法更改 ChartScrollbar 拖动手柄

amCharts angular directive cannot change ChartScrollbar draghandles

我似乎无法让 amCharts 尊重 ChartScrollbar 上的 dragIcon 属性。我有 a plunk here 证明了这个问题。

我怀疑这是 GrantMStevens amChartsDirective because of the previous problem I had with it not passing properties correctly and the fact that it works in this demo. The previous was debugged by xorspark 的问题,我能够复制他的调试,但这并没有以同样的方式被破坏。不幸的是,我还不够擅长调试 JavaScript 来追踪这个问题。

有人有什么想法吗?

  'use strict';
    angular.module('App')
    .controller('MyChartController', ['$scope', function($scope) {
        $scope.data = {};

        $scope.amChartOptions = {
        type: "serial",
        creditsPosition: "upper-left",

        categoryField: "IncidentId",
        rotate: true,
        theme: "light",
        categoryAxis: {
            parseDates: false,
            gridAlpha: 0.3,
            gridColor: "#d3d3d3"
        },
        trendLines: [],
        pathToImages: "http://cdn.amcharts.com/lib/3/images/",
        chartScrollbar: {
            oppositeAxis: true,
            autoGridCount: true,
            graph: "AmGraph-1",
            scrollbarHeight: 65,
            dragIcon: "dragIconRoundSmall",
            dragIconHeight: 65,
            backgroundColor: "#000",
            //color: "#000",
            backgroundAlpha: .5,
            selectedBackgroundColor: "#337ab7",
            svgIcons: true
        },
        graphs: [{
            fillColorsField: "lineColor",
            lineColorField: "lineColor",
            balloonText: "[[title]] for [[category]]: [[value]]",
            fillAlphas: 1,
            id: "AmGraph-1",
            title: "Escalation Age",
            type: "column",
            valueField: "Age"
        }],
        guides: [],
        valueAxes: [{
            baseValue: 0,
            id: "ValueAxis-1",
            labelFrequency: 1,
            dateFormats: [],
            title: "Days Active",
            autoGridCount: true,
            gridAlpha: 0.3,
            gridColor: "#d3d3d3",
        }],
        allLabels: [],
        balloon: {},
        legend: {
            enabled: false
        },
        titles: [{
            id: "Title-1",
            size: 15,
            text: ""
        }],
        data: [
            {
            "lineColor": "#ff0000",
            "IncidentId": 93528214,
            "Age": 19
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93434314,
            "Age": 16
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93524544,
            "Age": 12
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93525454,
            "Age": 10
        },{
            "lineColor": "#ff0000",
            "IncidentId": 96578214,
            "Age": 4
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93334519,
            "Age": 2
        }]
        }
    }]);

cdnjs 上旧的 3.13.0 版本的 AmCharts 不支持更改dragIcon。您需要使用更新的版本。最新版本的AmCharts库可以在AmCharts自己的CDN上找到:

  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  <script src="https://https://www.amcharts.com/lib/3/themes/chalk.js"></script>
  <script src="https://https://www.amcharts.com/lib/3/themes/black.js"></script>
  <script src="https://https://www.amcharts.com/lib/3/themes/dark.js"></script>

更新的插件:https://plnkr.co/edit/mw4f2FWiTsFkOdjd3tkE?p=preview