• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id="myChart"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        window.myTooltipJsRule = function(p) {
          //console.log(p);
          return {
            'background-color': 'red',
            'text': 'value:' + p.value
          };
        }
    
    
        let chartConfig = {
          "graphset": [{
            "type": "radar",
            "plot": {
              "aspect": "rose",
              "stacked": true,
              "angle-space": 0,
              "-angle": 7.5,
              "background-color": "grey",
              "border-width": 2,
              "border-color": "black",
              "rules": [],
              "tooltip": {
                "jsRule": "myTooltipJsRule()"
              },
              "hover-state": {
                "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
                "background-repeat": "no-repeat",
                "background-position": "50% 50%",
                "background-color": "#f00",
                "border-width": 2,
                "border-color": "#0f0"
              },
              "-selection-mode": "multiple",
              "-selected-state": {
                "border-color": "pink",
                "border-width": 4
              },
              "-selected-marker": {
                "border-color": "pink"
              },
              "jsRule": "myJsRule()"
            },
            "scale-v": {
              "values": "0:4:1",
              "format": "%v",
              "item": {
                "font-color": "#000",
                "font-family": "Georgia",
                "font-size": 14,
                "background-color": "#f90",
                "font-weight": "bold",
                "font-style": "italic",
                "rules": [{
                  "rule": "%scale-index === 0",
                  "visible": false
                }]
              },
              "ref-line": {
                "line-color": "black"
              },
              "tick": {
                "line-color": "black",
                "placement": "cross"
              }
            },
            "scale-k": {
              "aspect": "circle",
              "values": "0:23:1",
              "tick": {
                "line-color": "black",
                "placement": "outer"
              },
              "item": {
                "rules": [{
                  "rule": "%scale-index % 2 === 0",
                  "visible": false
                }]
              }
            },
            "shapes": [{
                "backgroundImage": "gold-sun-32.jpg"
              },
              {
                "backgroundImage": "moon_3.png"
              }
            ],
            "series": [{
                "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],
                "data-text": 0
              },
              {
                "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],
                "data-text": 1
              },
              {
                "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],
                "data-text": 2
              },
              {
                "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],
                "data-text": 3
              },
              {
                "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],
                "data-text": 4
              }
            ]
          }]
        }
    
    
    
    
    
    
    
        // allows hoverstate to be behind scale items.
        zingchart.DEV.PLOTSHLAYER = true;
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: 400,
          width: '100%'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="myChart"></div>
    </body>
    
    </html>
    
          
    window.myTooltipJsRule = function(p) {
      //console.log(p);
      return {
        'background-color': 'red',
        'text': 'value:' + p.value
      };
    }
    
    
    let chartConfig = {
      "graphset": [{
        "type": "radar",
        "plot": {
          "aspect": "rose",
          "stacked": true,
          "angle-space": 0,
          "-angle": 7.5,
          "background-color": "grey",
          "border-width": 2,
          "border-color": "black",
          "rules": [],
          "tooltip": {
            "jsRule": "myTooltipJsRule()"
          },
          "hover-state": {
            "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
            "background-repeat": "no-repeat",
            "background-position": "50% 50%",
            "background-color": "#f00",
            "border-width": 2,
            "border-color": "#0f0"
          },
          "-selection-mode": "multiple",
          "-selected-state": {
            "border-color": "pink",
            "border-width": 4
          },
          "-selected-marker": {
            "border-color": "pink"
          },
          "jsRule": "myJsRule()"
        },
        "scale-v": {
          "values": "0:4:1",
          "format": "%v",
          "item": {
            "font-color": "#000",
            "font-family": "Georgia",
            "font-size": 14,
            "background-color": "#f90",
            "font-weight": "bold",
            "font-style": "italic",
            "rules": [{
              "rule": "%scale-index === 0",
              "visible": false
            }]
          },
          "ref-line": {
            "line-color": "black"
          },
          "tick": {
            "line-color": "black",
            "placement": "cross"
          }
        },
        "scale-k": {
          "aspect": "circle",
          "values": "0:23:1",
          "tick": {
            "line-color": "black",
            "placement": "outer"
          },
          "item": {
            "rules": [{
              "rule": "%scale-index % 2 === 0",
              "visible": false
            }]
          }
        },
        "shapes": [{
            "backgroundImage": "gold-sun-32.jpg"
          },
          {
            "backgroundImage": "moon_3.png"
          }
        ],
        "series": [{
            "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],
            "data-text": 0
          },
          {
            "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],
            "data-text": 1
          },
          {
            "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],
            "data-text": 2
          },
          {
            "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],
            "data-text": 3
          },
          {
            "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],
            "data-text": 4
          }
        ]
      }]
    }
    
    
    
    
    
    
    
    // allows hoverstate to be behind scale items.
    zingchart.DEV.PLOTSHLAYER = true;
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });