Question

我正在尝试使用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;
       }

我可以看到带有角度2版本的顶点图表的实现和其他技术（例如Vue）会做出反应。但是我需要在angularJS 1版本中生成顶点图表的方式。

Answer 1

因为我有相同的要求，所以迟来了，但是如果有人仍然感兴趣，我写了一个小的指令，它包装了一个ApexCharts实例

（{_.isObject是underscore.js method，用于测试参数是否是对象，这是可选的，您可以添加自己的验证以进行类型检查）

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

            // init ApexCharts and call render
            var chart = new ApexCharts(
                    elem[0],
                    scope.options
                    );
            chart.render();

            scope.$watch('options', function (newOptions, oldOptions) {
                if (_.isObject(newOptions)) {
                    chart.updateOptions(newOptions);
                }
            });

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

需要注意的几件事

我在初始化指令后立即分配了一个ApexCharts对象，并在template中为其赋予了第一个元素，这样一来，我就无需分配{{1 }}
我立即致电render method id

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

我分配了一个观察者并观察新数据或选项，我致电chart.render()是因为它将更新图表而不清除或销毁它
我将chart.updateOptions(newOptions)放在了范围chart.destroy()事件处理程序中，以清理所有内容

带有Angularjs的Apexchart 1

1 个答案: