1

我正在尝试使用 apexchart 在 angularjs 1 中生成图表。如果可能，我想使用任一 ng-apexchart。我有以下代码：

我使用了来自 javascript 的代码，但似乎没有与 angularjs 内联。

 //app.js

angular.module('plunker', ['angularCharts']);

function MainCtrl($scope) {

var chart;

$scope.showchart=function(type){

var options = {
  chart: {
  height: 380,
  width: "100%",
  type: type
 },
   series: [
   {
     name: "Series 1",
     data: [[1, 34], [3.8, 43], [5, 31] , [10, 43], [13, 33], [15, 43], [18, 33] , [20, 52]]
   }
  ],
 tooltip: {
  x: {
    formatter: function(val) {
       return val.toFixed(1);
     }
    }
 }
 };

  chart = new ApexCharts( document.querySelector("#chart"), options);

 chart.render();

 };

 $scope.hihi=function(){
  console.log("hihi");
  var dataURL = chart.dataURI().then((uri) => {
  var pdf = new jsPDF();
   pdf.addImage(uri, 'PNG', 0, 0);
  pdf.save("download.pdf");
   })
 };

 }



  //index.html

  <!DOCTYPE html>
  <html ng-app="plunker">

   <head>
    <meta charset="utf-8" />
    <title>Angular-charts</title>
    <link rel="stylesheet" href="style.css" />
   </head>

  <body ng-controller="MainCtrl">


   <script data-require="angular.js@1.2.2" 
      src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"> 
   </script>

  <script type="text/javascript" 
  src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular- 
  charts.min.js"></script>
     <script  src = 
"https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.3/apexcharts.min.js"></script>
         <script 
 src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"> 
      </script>
  <script src="app.js"></script>



      <button ng-click="showchart('bar');" > Show Chart bar</button>
    <button ng-click="showchart('line');" > Show Chart line</button>
    <button ng-click="hihi();" > Submit</button>
 <div id="chart">
     </div>

   </body>

       </html>


      //style.css

      /* Put your css in here */

        #chart {
         max-width: 650px;
        margin: 35px auto;
       }

我可以看到使用 angular 2 版本和其他技术（例如 Vue、react）实现顶点图表。但我需要在 angularJS 1 版本中生成顶点图表的方式。

4

1 回答 1

2

迟到了，因为我只是有同样的要求，但如果有人仍然感兴趣，我已经编写了一个包装ApexCharts实例的小指令

function apex() {
    return {
        template: '<div></div>',
        scope: {
            data: "=",
            options: "="
        },
        link: function (scope, elem) {

            // init ApexCharts and call render
            var chart = new ApexCharts(
                    elem[0],
                    scope.options
                    );
            chart.render().then(function(resolved) {
                // Once the chart is drawn on the page, a promise is returned 
            });

            scope.$watch('data', function (newData, oldOptions) {
                // newData is set of series that Apex can process
                // you will have to validate it somewhere
                chart.updateSeries(newData, true);
            });

            scope.$watch('options', function (newOptions, oldOptions) {
                // newOptions is an updated set of options
                if (angular.isObject(newOptions)) {
                    chart.updateOptions(newOptions);
                }
            });

            scope.$on('$destroy', function () {
                if (angular.isObject(chart)) {
                    chart.destroy();
                }
            });
        }
    };
}

需要注意的几点是

  1. ApexCharts我在指令初始化后立即分配一个对象，并将其作为 中的第一个元素template，这样我就不需要分配id

  2. 我立即调用渲染方法 chart.render()

render() 方法负责在页面上绘制图表。这是配置选项后必须调用的主要方法。

  1. 我分配了一个观察者并观察新的数据或选项，我调用chart.updateOptions(newOptions)更新图表而不破坏它，chart.updateSeries(newData, true)更新数据系列并强制重绘。

  2. 我将chart.destroy()范围$destroy事件处理程序放在内部以清理所有内容

于 2019-09-05T11:13:00.503 回答