Javascript 带Angularjs 1的Apexchart_Javascript_Angularjs_Apexcharts

Javascript 带Angularjs 1的Apexchart

javascript angularjs

Javascript 带Angularjs 1的Apexchart,javascript,angularjs,apexcharts,Javascript,Angularjs,Apexcharts,我正在尝试使用apexchart在angularjs 1中生成图表。如果可能的话，我想使用ng-apexchart。我的代码如下：我使用了来自javascript的代码，但似乎没有与angularjs内联 //app.js angular.module('plunker', ['angularCharts']); function MainCtrl($scope) { var chart; $scope.showchart=function(type){ var options =

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

//app.js
角度模块（'plunker'，['angularCharts']）；
函数MainCtrl（$scope）{
var图；
$scope.showchart=函数（类型）{
变量选项={
图表：{
身高：380，
宽度：“100%”，
类型：类型
},
系列：[
{
名称：“系列1”，
数据：[[1,34]，[3.8,43]，[5,31]，[10,43]，[13,33]，[15,43]，[18,33]，[20,52]]
}
],
工具提示：{
x:{
格式化程序：函数（val）{
返回固定值（1）；
}
}
}
};
图表=新的ApexCharts（document.querySelector（“图表”），选项）；
chart.render（）；
};
$scope.hihihi=函数（）{
控制台日志（“hihi”）；
var dataURL=chart.dataURI（）。然后（（uri）=>{
var pdf=新的jsPDF（）；
pdf.addImage（uri，'PNG'，0,0）；
pdf.save（“download.pdf”）；
})
};
}
//index.html
角度图
显示图表栏
显示图表线
提交
//style.css
/*把你的css放在这里*/
#图表{
最大宽度：650px；
利润率：35px自动；
}

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

回答得晚了，因为我有相同的要求，但是如果有人仍然感兴趣，我已经编写了一个小指令，它封装了一个

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();
                }
            });
        }
    };
}

函数apex（）{
返回{
模板：“”，
范围：{
数据：“=”，
选项：“=”
},
链接：功能（范围、要素）{
//初始化ApexCharts并调用render
var图表=新的ApexCharts(
元素[0]，
范围.选择
);
chart.render（）.then（函数（已解析）{
//在页面上绘制图表后，将返回一个承诺
});
范围.$watch（'data'，函数（newData，oldpoptions）{
//newData是Apex可以处理的系列集
//你必须在某个地方验证它
图表更新序列（newData，true）；
});
范围.$watch（'options'，函数（新选项，旧选项）{
//newOptions是一组更新的选项
if（角度等深线（新选项））{
图表。更新选项（新选项）；
}
});
作用域：$on（“$destroy”，函数（）{
if（角度等深线（图表））{
chart.destroy（）；
}
});
}
};
}

需要注意的几件事是

一旦指令初始化，我就分配一个

ApexCharts

对象，并将

模板中的第一个元素赋予它，这样我就不需要分配id


我立即调用chart.render（）

render（）方法负责在页面上绘制图表。它是配置选项后必须调用的主要方法
我分配了一个观察者并观察新的数据或选项，我调用chart.updateOptions（newOptions）
更新图表而不破坏它，chart.updateSeries（newData，true）
更新数据系列并强制重绘
我将chart.destroy（）
放在作用域$destroy
事件处理程序中，以清理所有内容
你不能将百分比传递给宽度，我能在plunker中得到一个例子吗？@SajeevZacharias有什么解决方案吗？