Angular 8 Как использовать zingchart? И установить значения и некоторые другие настройки? - PullRequest
Новая
       24

Angular 8 Как использовать zingchart? И установить значения и некоторые другие настройки?

0 голосов
/ 06 июня 2019

Я создал радар, следуя примеру:
radarZing.html 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="radarZing.css">
        <title>Radar Zing</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];
        </script>

    </head>
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
        <script src="radarZing.js">
    </script>
    </body>
</html>

radarZing.js 

var myConfig = {
  type : 'radar',
  title : {
    text : "Radar utilisant Zing"
  },
  subtitle : {
    text : "petit test"
  },
  legend :{
      "highlight-plot":true,
      "draggable":true, //automatically adds header
      // "drag-handler":"icon", //"header" (default) or "icon"
      header : {
        text : "Equipes:"
      },
      "toggle-action" : "remove", // "hide" (default),"remove","disabled" | peut aussi être utilisé sur des items et markers
    layout : "3x1", // lignes x colonnes
    x : "70%",
    y : "10%"
  },
  plot : {
    aspect : 'area',
    animation: {
        "on-legend-toggle" : true, // recrée le dessin quand un élément est retiré
      effect:3,
      sequence:1,
      speed:700
    }
  },
  scaleV : {
    visible : false
  },
  scaleK : {
    values : '0:5:1',
    labels : ['Java','C','Javascript',"Travail d'equipe", 'Conseil', 'Angular' ],
    item : {
      fontColor : '#607D8B',
      backgroundColor : "white",
      borderColor : "#aeaeae",
      borderWidth : 1,
      padding : '5 10',
      borderRadius : 10
    },
    refLine : {
      lineColor : '#c10000'
    },
    tick : {
      lineColor : '#59869c',
      lineWidth : 2,
      lineStyle : 'dotted',
      size : 20
    },
    guide : {
      lineColor : "#607D8B",
      lineStyle : 'solid',
      alpha : 0.3,
      backgroundColor : "#c5c5c5 #718eb4"
    }
  },
  series : [
    {
      values : [59, 39, 38, 19, 21, 35],
      text:'Equipe 1'
    },
    {
      values : [20, 20, 54, 41, 41, 35],
      //lineColor : '#53a534',
      //backgroundColor : '#689F38',
      text : 'Equipe 2'
    },
    {values : [70, 60, 5, 62, 21, 45],
    //lineColor : '#4F57FC',
    //backgroundColor: '#333CFF',
    text : 'Equipe 3'
    }
  ]
};

zingchart.render({ 
    id : 'myChart', 
    data : myConfig, 
    height: '100%', 
    width: '100%' 
});

radarZing.css 

html, body {
  height:100%;
  width:100%;
}
#myChart {
  height:100%;
  width:100%;
  min-height:250px;
}
.zc-ref {
  display:none;
}

И я пытаюсь сгенерировать его с помощью компонента, но каждый найденный пример использует тег, но я хочу установить значения и некоторые другие параметры, используя некоторые данные, которые я получаю из базы данных.
Могу ли я использовать угловую привязку в теге или есть способ сделать это с одним или несколькими компонентами?
И можете ли вы привести мне пример?

...