• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id="myChart"></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     window.myTooltipJsRule = function(p) {
    17.       //console.log(p);
    18.       return {
    19.         'background-color': 'red',
    20.         'text': 'value:' + p.value
    21.       };
    22.     }
    23.  
    24.  
    25.     let chartConfig = {
    26.       "graphset": [{
    27.         "type": "radar",
    28.         "plot": {
    29.           "aspect": "rose",
    30.           "stacked": true,
    31.           "angle-space": 0,
    32.           "-angle": 7.5,
    33.           "background-color": "grey",
    34.           "border-width": 2,
    35.           "border-color": "black",
    36.           "rules": [],
    37.           "tooltip": {
    38.             "jsRule": "myTooltipJsRule()"
    39.           },
    40.           "hover-state": {
    41.             "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
    42.             "background-repeat": "no-repeat",
    43.             "background-position": "50% 50%",
    44.             "background-color": "#f00",
    45.             "border-width": 2,
    46.             "border-color": "#0f0"
    47.           },
    48.           "-selection-mode": "multiple",
    49.           "-selected-state": {
    50.             "border-color": "pink",
    51.             "border-width": 4
    52.           },
    53.           "-selected-marker": {
    54.             "border-color": "pink"
    55.           },
    56.           "jsRule": "myJsRule()"
    57.         },
    58.         "scale-v": {
    59.           "values": "0:4:1",
    60.           "format": "%v",
    61.           "item": {
    62.             "font-color": "#000",
    63.             "font-family": "Georgia",
    64.             "font-size": 14,
    65.             "background-color": "#f90",
    66.             "font-weight": "bold",
    67.             "font-style": "italic",
    68.             "rules": [{
    69.               "rule": "%scale-index === 0",
    70.               "visible": false
    71.             }]
    72.           },
    73.           "ref-line": {
    74.             "line-color": "black"
    75.           },
    76.           "tick": {
    77.             "line-color": "black",
    78.             "placement": "cross"
    79.           }
    80.         },
    81.         "scale-k": {
    82.           "aspect": "circle",
    83.           "values": "0:23:1",
    84.           "tick": {
    85.             "line-color": "black",
    86.             "placement": "outer"
    87.           },
    88.           "item": {
    89.             "rules": [{
    90.               "rule": "%scale-index % 2 === 0",
    91.               "visible": false
    92.             }]
    93.           }
    94.         },
    95.         "shapes": [{
    96.             "backgroundImage": "gold-sun-32.jpg"
    97.           },
    98.           {
    99.             "backgroundImage": "moon_3.png"
    100.           }
    101.         ],
    102.         "series": [{
    103.             "values": [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
    104.             "data-text": 0
    105.           },
    106.           {
    107.             "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    108.             "data-text": 1
    109.           },
    110.           {
    111.             "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    112.             "data-text": 2
    113.           },
    114.           {
    115.             "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    116.             "data-text": 3
    117.           },
    118.           {
    119.             "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    120.             "data-text": 4
    121.           }
    122.         ]
    123.       }]
    124.     }
    125.  
    126.  
    127.  
    128.  
    129.  
    130.  
    131.  
    132.     // allows hoverstate to be behind scale items.
    133.     zingchart.DEV.PLOTSHLAYER = true;
    134.  
    135.     zingchart.render({
    136.       id: 'myChart',
    137.       data: chartConfig,
    138.       height: 400,
    139.       width: '100%'
    140.     });
    141.   </script>
    142. </body>
    143.  
    144. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. window.myTooltipJsRule = function(p) {
    2.   //console.log(p);
    3.   return {
    4.     'background-color': 'red',
    5.     'text': 'value:' + p.value
    6.   };
    7. }
    8.  
    9.  
    10. let chartConfig = {
    11.   "graphset": [{
    12.     "type": "radar",
    13.     "plot": {
    14.       "aspect": "rose",
    15.       "stacked": true,
    16.       "angle-space": 0,
    17.       "-angle": 7.5,
    18.       "background-color": "grey",
    19.       "border-width": 2,
    20.       "border-color": "black",
    21.       "rules": [],
    22.       "tooltip": {
    23.         "jsRule": "myTooltipJsRule()"
    24.       },
    25.       "hover-state": {
    26.         "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
    27.         "background-repeat": "no-repeat",
    28.         "background-position": "50% 50%",
    29.         "background-color": "#f00",
    30.         "border-width": 2,
    31.         "border-color": "#0f0"
    32.       },
    33.       "-selection-mode": "multiple",
    34.       "-selected-state": {
    35.         "border-color": "pink",
    36.         "border-width": 4
    37.       },
    38.       "-selected-marker": {
    39.         "border-color": "pink"
    40.       },
    41.       "jsRule": "myJsRule()"
    42.     },
    43.     "scale-v": {
    44.       "values": "0:4:1",
    45.       "format": "%v",
    46.       "item": {
    47.         "font-color": "#000",
    48.         "font-family": "Georgia",
    49.         "font-size": 14,
    50.         "background-color": "#f90",
    51.         "font-weight": "bold",
    52.         "font-style": "italic",
    53.         "rules": [{
    54.           "rule": "%scale-index === 0",
    55.           "visible": false
    56.         }]
    57.       },
    58.       "ref-line": {
    59.         "line-color": "black"
    60.       },
    61.       "tick": {
    62.         "line-color": "black",
    63.         "placement": "cross"
    64.       }
    65.     },
    66.     "scale-k": {
    67.       "aspect": "circle",
    68.       "values": "0:23:1",
    69.       "tick": {
    70.         "line-color": "black",
    71.         "placement": "outer"
    72.       },
    73.       "item": {
    74.         "rules": [{
    75.           "rule": "%scale-index % 2 === 0",
    76.           "visible": false
    77.         }]
    78.       }
    79.     },
    80.     "shapes": [{
    81.         "backgroundImage": "gold-sun-32.jpg"
    82.       },
    83.       {
    84.         "backgroundImage": "moon_3.png"
    85.       }
    86.     ],
    87.     "series": [{
    88.         "values": [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
    89.         "data-text": 0
    90.       },
    91.       {
    92.         "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    93.         "data-text": 1
    94.       },
    95.       {
    96.         "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    97.         "data-text": 2
    98.       },
    99.       {
    100.         "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    101.         "data-text": 3
    102.       },
    103.       {
    104.         "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    105.         "data-text": 4
    106.       }
    107.     ]
    108.   }]
    109. }
    110.  
    111.  
    112.  
    113.  
    114.  
    115.  
    116.  
    117. // allows hoverstate to be behind scale items.
    118. zingchart.DEV.PLOTSHLAYER = true;
    119.  
    120. zingchart.render({
    121.   id: 'myChart',
    122.   data: chartConfig,
    123.   height: 400,
    124.   width: '100%'
    125. });