• 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>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="zc"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var palette = [
          '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
          '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
        ];
    
        var transforms = [
          [8, '0%', 'none', 'fixed=60%;50%'],
          [8, '40%', 'none', 'fixed=60%;50%'],
          [8, '0%', 'flat', 'fixed=60%;50%'],
          [8, '40%', 'flat', 'fixed=50%;50%'],
          [8, '0%', 'fold=20', 'fixed=50%;50%'],
          [8, '40%', 'fold=20', 'fixed=35%;50%'],
          [5, '40%', 'callout=8', 'fixed=50%;50%'],
          [5, '60%', 'flow=10', 'fixed=50%;60%'],
          [5, '60%', 'flow=-99', 'fixed=50%;40%'],
          [8, '0%', 'bite=15', 'fixed=50%;50%'],
          [8, '40%', 'bite=15', 'fixed=40%;50%'],
          [4, '0%', 'droplet', 'fixed=70%;50%']
        ];
    
        var cdata = {
          graphset: [
    
          ]
        };
        for (var r = 0; r < 3; r++) {
          for (var c = 0; c < 4; c++) {
            var idx = r * 4 + c;
            if (transforms[idx]) {
              var gdata = {
                x: c * 200,
                y: r * 200,
                width: 200,
                height: 200,
                type: 'pie',
                plotarea: {
                  margin: '15 5 5 5'
                },
                title: {
                  fontSize: 11,
                  text: 'pieTransform:' + transforms[idx][2]
                },
                plot: {
                  borderWidth: 1,
                  borderColor: '#fff',
                  borderAlpha: 0.2,
                  slice: transforms[idx][1],
                  pieTransform: transforms[idx][2],
                  hoverState: {
                    visible: false
                  },
                  tooltip: {
                    text: 'Pie #%plot-index'
                  },
                  valueBox: {
                    placement: transforms[idx][3],
                    fontSize: 11,
                    text: '#%plot-index'
                  }
                },
                series: []
              };
              for (var i = 0; i < transforms[idx][0]; i++) {
                gdata.series.push({
                  values: [1],
                  backgroundColor: palette[i]
                });
              }
              cdata.graphset.push(gdata);
            }
          }
        }
    
        zingchart.render({
          'id': 'zc',
          'width': 800,
          'height': 600,
          'output': 'svg',
          'data': cdata
        });
      </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="zc"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var palette = [
      '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
      '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    ];
    
    var transforms = [
      [8, '0%', 'none', 'fixed=60%;50%'],
      [8, '40%', 'none', 'fixed=60%;50%'],
      [8, '0%', 'flat', 'fixed=60%;50%'],
      [8, '40%', 'flat', 'fixed=50%;50%'],
      [8, '0%', 'fold=20', 'fixed=50%;50%'],
      [8, '40%', 'fold=20', 'fixed=35%;50%'],
      [5, '40%', 'callout=8', 'fixed=50%;50%'],
      [5, '60%', 'flow=10', 'fixed=50%;60%'],
      [5, '60%', 'flow=-99', 'fixed=50%;40%'],
      [8, '0%', 'bite=15', 'fixed=50%;50%'],
      [8, '40%', 'bite=15', 'fixed=40%;50%'],
      [4, '0%', 'droplet', 'fixed=70%;50%']
    ];
    
    var cdata = {
      graphset: [
    
      ]
    };
    for (var r = 0; r < 3; r++) {
      for (var c = 0; c < 4; c++) {
        var idx = r * 4 + c;
        if (transforms[idx]) {
          var gdata = {
            x: c * 200,
            y: r * 200,
            width: 200,
            height: 200,
            type: 'pie',
            plotarea: {
              margin: '15 5 5 5'
            },
            title: {
              fontSize: 11,
              text: 'pieTransform:' + transforms[idx][2]
            },
            plot: {
              borderWidth: 1,
              borderColor: '#fff',
              borderAlpha: 0.2,
              slice: transforms[idx][1],
              pieTransform: transforms[idx][2],
              hoverState: {
                visible: false
              },
              tooltip: {
                text: 'Pie #%plot-index'
              },
              valueBox: {
                placement: transforms[idx][3],
                fontSize: 11,
                text: '#%plot-index'
              }
            },
            series: []
          };
          for (var i = 0; i < transforms[idx][0]; i++) {
            gdata.series.push({
              values: [1],
              backgroundColor: palette[i]
            });
          }
          cdata.graphset.push(gdata);
        }
      }
    }
    
    zingchart.render({
      'id': 'zc',
      'width': 800,
      'height': 600,
      'output': 'svg',
      'data': cdata
    });