• 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.     var myConfig = {
    17.       "type": "pie",
    18.       "title": {
    19.         "text": "Pie Chart Styling"
    20.       },
    21.       "plot": {
    22.         "border-width": 1,
    23.         "border-color": "#cccccc",
    24.         "line-style": "dotted",
    25.         "value-box": {
    26.           "font-size": 10,
    27.           "font-weight": "normal",
    28.           "placement": "out"
    29.         }
    30.       },
    31.       "series": [{
    32.           "values": [234],
    33.           "background-color": "#cc0000"
    34.         },
    35.         {
    36.           "values": [121],
    37.           "background-color": "#ff3300"
    38.         },
    39.         {
    40.           "values": [77],
    41.           "background-color": "#ff6600"
    42.         },
    43.         {
    44.           "values": [65],
    45.           "background-color": "#ff9933"
    46.         },
    47.         {
    48.           "values": [59],
    49.           "background-color": "#ffcc00"
    50.         },
    51.         {
    52.           "values": [35],
    53.           "background-color": "#ace600"
    54.         },
    55.         {
    56.           "values": [34],
    57.           "background-color": "#88cc00"
    58.         },
    59.         {
    60.           "values": [31],
    61.           "background-color": "#339933"
    62.         },
    63.         {
    64.           "values": [16],
    65.           "background-color": "#66ccff"
    66.         },
    67.         {
    68.           "values": [14],
    69.           "background-color": "#3399ff"
    70.         },
    71.         {
    72.           "values": [13],
    73.           "background-color": "#0066ff"
    74.         },
    75.         {
    76.           "values": [12],
    77.           "background-color": "#3333cc"
    78.         },
    79.         {
    80.           "values": [11],
    81.           "background-color": "#6600ff"
    82.         },
    83.         {
    84.           "values": [10],
    85.           "background-color": "#9933ff"
    86.         },
    87.         {
    88.           "values": [9],
    89.           "background-color": "#9999ff"
    90.         }
    91.       ]
    92.     };
    93.  
    94.     zingchart.render({
    95.       id: 'myChart',
    96.       data: myConfig,
    97.       height: 400,
    98.       width: "100%"
    99.     });
    100.   </script>
    101. </body>
    102.  
    103. </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. var myConfig = {
    2.   "type": "pie",
    3.   "title": {
    4.     "text": "Pie Chart Styling"
    5.   },
    6.   "plot": {
    7.     "border-width": 1,
    8.     "border-color": "#cccccc",
    9.     "line-style": "dotted",
    10.     "value-box": {
    11.       "font-size": 10,
    12.       "font-weight": "normal",
    13.       "placement": "out"
    14.     }
    15.   },
    16.   "series": [{
    17.       "values": [234],
    18.       "background-color": "#cc0000"
    19.     },
    20.     {
    21.       "values": [121],
    22.       "background-color": "#ff3300"
    23.     },
    24.     {
    25.       "values": [77],
    26.       "background-color": "#ff6600"
    27.     },
    28.     {
    29.       "values": [65],
    30.       "background-color": "#ff9933"
    31.     },
    32.     {
    33.       "values": [59],
    34.       "background-color": "#ffcc00"
    35.     },
    36.     {
    37.       "values": [35],
    38.       "background-color": "#ace600"
    39.     },
    40.     {
    41.       "values": [34],
    42.       "background-color": "#88cc00"
    43.     },
    44.     {
    45.       "values": [31],
    46.       "background-color": "#339933"
    47.     },
    48.     {
    49.       "values": [16],
    50.       "background-color": "#66ccff"
    51.     },
    52.     {
    53.       "values": [14],
    54.       "background-color": "#3399ff"
    55.     },
    56.     {
    57.       "values": [13],
    58.       "background-color": "#0066ff"
    59.     },
    60.     {
    61.       "values": [12],
    62.       "background-color": "#3333cc"
    63.     },
    64.     {
    65.       "values": [11],
    66.       "background-color": "#6600ff"
    67.     },
    68.     {
    69.       "values": [10],
    70.       "background-color": "#9933ff"
    71.     },
    72.     {
    73.       "values": [9],
    74.       "background-color": "#9999ff"
    75.     }
    76.   ]
    77. };
    78.  
    79. zingchart.render({
    80.   id: 'myChart',
    81.   data: myConfig,
    82.   height: 400,
    83.   width: "100%"
    84. });