Axure插入echarts和Highcharts图表

第一步,在Axure创建一个矩形,取名字

第二步,对矩形添加交互,选择载入时,选择链接到URL或文件路径

第三步,打开Echarts或Highcharts官网

Echarts:在官网中打开示例,选择你想要的图形,点击~

然后在代码编译器中加入以下代码:其中  var dom =$('[data-label=test]').get(0);中的test 为Axure矩形的名字。


   
   
  1. javascript:
  2. var script = document. createElement( 'script');
  3. script. type = "text/javascript";
  4. script. src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
  5. document. head. appendChild(script);
  6. setTimeout( function( ){
  7. var dom =$( '[data-label=test]'). get( 0);
  8. var myChart = echarts. init(dom);
  9. var option = {
  10. };
  11. if (option && typeof option === "object"){
  12. myChart. setOption(option, true);
  13. }}, 800);

复制option下面的所有代码,放入到下面这里


   
   
  1. javascript:
  2. var script = document. createElement( 'script');
  3. script. type = "text/javascript";
  4. script. src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
  5. document. head. appendChild(script);
  6. setTimeout( function( ){
  7. var dom =$( '[data-label=test]'). get( 0);
  8. var myChart = echarts. init(dom);
  9. var option = {
  10. 将复制的代码放到这里。
  11. };
  12. if (option && typeof option === "object"){
  13. myChart. setOption(option, true);
  14. }}, 800);

Echarts完整代码:(建议先在代码编译器写好代码,在放入Axure中)


   
   
  1. javascript:
  2. var script = document. createElement( 'script');
  3. script. type = "text/javascript";
  4. script. src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
  5. document. head. appendChild(script);
  6. setTimeout( function( ){
  7. var dom =$( '[data-label=Highchartsbingtu]'). get( 0);
  8. var myChart = echarts. init(dom);
  9. var option = {
  10. title: {
  11. text: 'Referer of a Website',
  12. subtext: 'Fake Data',
  13. left: 'center'
  14. },
  15. tooltip: {
  16. trigger: 'item'
  17. },
  18. legend: {
  19. orient: 'vertical',
  20. left: 'left'
  21. },
  22. series: [
  23. {
  24. name: 'Access From',
  25. type: 'pie',
  26. radius: '50%',
  27. data: [
  28. { value: 1048, name: 'Search Engine' },
  29. { value: 735, name: 'Direct' },
  30. { value: 580, name: 'Email' },
  31. { value: 484, name: 'Union Ads' },
  32. { value: 300, name: 'Video Ads' }
  33. ],
  34. emphasis: {
  35. itemStyle: {
  36. shadowBlur: 10,
  37. shadowOffsetX: 0,
  38. shadowColor: 'rgba(0, 0, 0, 0.5)'
  39. }
  40. }
  41. }
  42. ]
  43. };
  44. if (option && typeof option === "object"){
  45. myChart. setOption(option, true);
  46. }}, 800);

效果:

Highcharts:

也是同样的道理,只是代码不同。把复制的代码放入function HighchartsInit方法体中。


   
   
  1. javascript:
  2. $. getScript( 'http://cdn.highcharts.com.cn/highcharts/highcharts.js', function( ){
  3. var dom =$( '[data-label=Charts]'). get( 0);
  4. HighchartsInit(dom)
  5. }
  6. );
  7. function HighchartsInit( dom)
  8. {
  9. });
  10. }

注意:Highcharts代码,把'container'改成dom,两边的引号也要去掉;

最终代码:


   
   
  1. javascript:
  2. $. getScript( 'http://cdn.highcharts.com.cn/highcharts/highcharts.js', function( ){
  3. var dom =$( '[data-label=Highchartsbingtu]'). get( 0);
  4. HighchartsInit(dom)
  5. }
  6. );
  7. function HighchartsInit( dom)
  8. {
  9. Highcharts. chart(dom, {
  10. chart: {
  11. plotBackgroundColor: null,
  12. plotBorderWidth: null,
  13. plotShadow: false,
  14. type: 'pie'
  15. },
  16. title: {
  17. text: '2018 年浏览器市场份额'
  18. },
  19. tooltip: {
  20. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  21. },
  22. plotOptions: {
  23. pie: {
  24. allowPointSelect: true,
  25. cursor: 'pointer',
  26. dataLabels: {
  27. enabled: false
  28. },
  29. showInLegend: true
  30. }
  31. },
  32. series: [{
  33. name: 'Brands',
  34. colorByPoint: true,
  35. data: [{
  36. name: 'Chrome',
  37. y: 61.41,
  38. sliced: true,
  39. selected: true
  40. }, {
  41. name: 'Internet Explorer',
  42. y: 11.84
  43. }, {
  44. name: 'Firefox',
  45. y: 10.85
  46. }, {
  47. name: 'Edge',
  48. y: 4.67
  49. }, {
  50. name: 'Safari',
  51. y: 4.18
  52. }, {
  53. name: 'Other',
  54. y: 7.05
  55. }]
  56. }]
  57. });
  58. }

 效果:

 

 

 

 

转载:https://blog.csdn.net/ldy597321444/article/details/123064822?utm_medium=distribute.pc_feed_v2.none-task-blog-personrec_tag-4.pc_personrecdepth_1-utm_source=distribute.pc_feed_v2.none-task-blog-personrec_tag-4.pc_personrec
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值