Amcharts v3 Scroll не работает в приложении angular 5 - PullRequest
Новая
       6

Amcharts v3 Scroll не работает в приложении angular 5

0 голосов
/ 10 января 2020

Я использую диаграммы Amcharts V3 в своем приложении angular 5. Полоса прокрутки Amcharts v3 отображается, но не работает в приложении angular 5. Тем не менее, я попытался использовать тот же код в codepen.io для воссоздания кода, он работал там. Я не уверен, что я не делаю правильно ????

https://codepen.io/Iam_Sank8/pen/oNggomy

var chart = AmCharts.makeChart("chartdiv", {
        "type": "gantt",
        "theme": "light",
        "period": "MM",
        "columnWidth": 1,
        "dataDateFormat": "YYYY-MM-DD",
        "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
        "categoryAxis": {
          "guides": guides,
          "gridPosition": "start",
          "tickPosition": "start",
          "gridAlpha": 1,
          "autoWrap": true,
          "twoLineMode": true,
          "equalSpacing": false,
          "gridThickness": 1,
          "lineThickness": 1,
          "columnWidth": 1,
        },
        "categoryAxesSettings": {
          "minPeriod": "mm",
        },
        "valueAxis": {
          "gridPosition": "middle",
          "tickPosition": "middle",
          "type": "date",
          "position": "top",
          "gridThickness": 1,
          "autoWrap": true
        },
        "valueAxesSettings": {
          "minimum": 0
        },
        "graph": {
          "fillAlphas": 1,
          "lineAlpha": 1,
          "lineColor": "#fff",
          "valueField": "date",
          "balloon": {
            "disableMouseEvents": true,
            "fixedPosition": true,
          },
          "balloonText": `Task Name : [[task]]<br /> 
            Task Id : [[TaskId]] <br />
            Action Id : [[ActionId]] <br />
            Due Date : [[DueDate]] <br/>
            Action Owner : [[ActionOwner]] <br />
            Action Party : [[ActionParty]] <br />
            Action Verifier : [[ActionVerifier]] <br />
            Close Date : [[ClosedDate]] <br />
            Status : [[Status]] <br />
            ClosureReport: <strong>Double click to download</strong>`,
          "labelText": "[[label]]",
          "labelPosition": "inside",
        },
        "rotate": true,
        "categoryField": "category",
        "segmentsField": "segments",
        "colorField": "color",
        "startDateField": "start",
        "endDateField": "end",
        "dataProvider": categoryData,
        "valueScrollbar": {
          "autoGridCount": true,
          "enabled": true
        },
        "chartCursor": {
          "cursorColor": "#55bb76",
          "valueBalloonsEnabled": false,
          "cursorAlpha": 1,
          "valueLineAlpha": 1,
          "valueLineBalloonEnabled": true,
          "valueLineEnabled": true,
          "zoomable": false,
          "valueZoomable": true,
          "cursorPosition": "middle",
        },
        "export": {
          "enabled": true,
          "menu": [],
          "exportFields": [
            "task",
            "Status",
            "TaskId",
            "SectionName",
            "ActionId",
            "ActionOwner",
            "ActionParty",
            "ActionVerifier",
            "ClosedDate",
            "DueDate"
          ],
          "columnNames": {
            "task": "Task Name",
            "Status": "Status",
            "TaskId": "Task Id",
            "SectionName": "Section Name",
            "ActionId": "Action Id",
            "ActionOwner": "Action Owner",
            "ActionParty": "Action Party",
            "ActionVerifier": "Action Verifier",
            "ClosedDate": "Closed Date",
            "DueDate": "Due Date"
          }
        },
        "listeners": [{
          "event": "doubleClickGraphItem",
          "method": function (e) {
            if (e.graph.segmentData.Report) {
              var filename = e.graph.segmentData.Report.substr(e.graph.segmentData.Report.lastIndexOf('/') + 1, e.graph.segmentData.Report.length - e.graph.segmentData.Report.lastIndexOf('/'));
              var a = document.createElement('a');
              a.href = e.graph.segmentData.Report;
              a.target = '_blank';
              a.download = filename;
              document.body.appendChild(a);
              a.click();
            }
          }
        }],
        "legend": {
          "divId": "legenddiv",
          "data": [{
            "title": "Overdue (O)",
            "color": "red"
          }, {
            "title": "Done (D)",
            "color": "green"
          }, {
            "title": "Done With Overdue (I)",
            "color": "orange"
          }, {
            "title": "Scheduled (S)",
            "color": "yellow"
          }]
        }
      });
...