• 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.     let chartConfig = {
    17.       graphset: [{
    18.         type: 'null',
    19.         tooltip: {
    20.           padding: '10 20',
    21.           backgroundColor: '#333',
    22.           color: '#fff',
    23.           callout: true,
    24.           calloutPosition: 'bottom',
    25.           borderRadius: 10
    26.         },
    27.         shapes: [{
    28.             type: 'rect',
    29.             id: 'rect',
    30.             borderWidth: 2,
    31.             alpha: 0.5,
    32.             borderColor: '#f0f',
    33.             backgroundColor: '#09f #f09',
    34.             x: 50,
    35.             y: 100,
    36.             width: 50,
    37.             height: 100,
    38.             hoverState: {
    39.               backgroundColor: '#eee',
    40.               alpha: 0.4
    41.             },
    42.             label: {
    43.               text: 'Rect',
    44.               borderColor: '#333',
    45.               borderWidth: 2,
    46.               padding: 5,
    47.               alpha: 0.8
    48.             }
    49.           },
    50.           {
    51.             type: 'circle',
    52.             id: 'mycircle',
    53.             borderWidth: 2,
    54.             borderColor: '#f00',
    55.             backgroundColor: '#FF5722',
    56.             x: 150,
    57.             y: 100,
    58.             size: 40,
    59.             hoverState: {
    60.               backgroundColor: '#ff3d00'
    61.             },
    62.             label: {
    63.               text: 'Circle'
    64.             }
    65.           },
    66.           {
    67.             type: 'pie',
    68.             id: 'myPie',
    69.             borderWidth: 2,
    70.             borderColor: '#FFC107',
    71.             backgroundColor: '#FFEB3B',
    72.             x: 250,
    73.             y: 100,
    74.             size: 40,
    75.             angleStart: 0,
    76.             angleEnd: 330,
    77.             hoverState: {
    78.               alpha: 1,
    79.               angleEnd: 358,
    80.               backgroundColor: '#39d474',
    81.               borderColor: '#00ac42'
    82.             },
    83.             label: {
    84.               text: 'Pie',
    85.               padding: '2 4',
    86.               offsetY: 20
    87.             }
    88.           },
    89.           {
    90.             type: 'star5',
    91.             id: 'myStar5',
    92.             borderWidth: 2,
    93.             borderColor: '#01579B',
    94.             backgroundColor: '#0277BD #4FC3F7',
    95.             x: 360,
    96.             y: 100,
    97.             size: 25,
    98.             hoverState: {
    99.               backgroundColor: '#039BE5 #FFF',
    100.               size: 38,
    101.               type: 'star8',
    102.               alpha: 1
    103.             },
    104.             label: {
    105.               text: 'Star 5',
    106.               padding: '2 4'
    107.             }
    108.           },
    109.           {
    110.             type: 'star9',
    111.             id: 'myStar9',
    112.             borderWidth: 2,
    113.             borderColor: '#E65100',
    114.             fillType: 'radial',
    115.             gradientColors: '#FFF59D #FFC107 #F4511E',
    116.             gradientStops: '0.1 0.5 0.9',
    117.             x: 500,
    118.             y: 100,
    119.             size: 50,
    120.             label: {
    121.               text: 'Star 9',
    122.               fontColor: '#4d4d4d',
    123.               fontWeight: 'bold',
    124.               fontSize: 20,
    125.               padding: 10
    126.             },
    127.             hoverState: {
    128.               gradientColors: '#FBC02D #FFA000 #E65100',
    129.               gradientStops: '0.1 0.5 0.9'
    130.             }
    131.           },
    132.           {
    133.             type: 'pie',
    134.             id: 'myRing',
    135.             borderWidth: 0,
    136.  
    137.             backgroundColor: '#DCEDC8 #7CB342',
    138.             shadow: 0.4,
    139.             shadowDistance: 5,
    140.             hoverState: {
    141.               backgroundColor: '#FFEB3B #F44336',
    142.               angleStart: 180,
    143.               angleEnd: 540
    144.             },
    145.             x: 70,
    146.             y: 230,
    147.             size: 50,
    148.             slice: 30,
    149.             angleStart: 180,
    150.             angleEnd: 450,
    151.             tooltip: {
    152.               text: 'Gauge'
    153.             },
    154.             label: {
    155.               text: 'Ring'
    156.             }
    157.           },
    158.           {
    159.             type: 'square',
    160.             id: 'mySquare',
    161.             borderWidth: 5,
    162.             borderColor: 5,
    163.             backgroundColor: '#0277BD',
    164.             x: 200,
    165.             y: 230,
    166.             size: 40,
    167.             label: {
    168.               text: 'Square',
    169.               padding: '2 4'
    170.             },
    171.             tooltip: {
    172.               text: 'I am a square'
    173.             }
    174.           },
    175.           {
    176.             type: 'diamond',
    177.             id: 'myDiamond',
    178.             borderWidth: 2,
    179.             borderColor: '#00C853',
    180.             backgroundColor: '#00E676',
    181.             x: 330,
    182.             y: 230,
    183.             size: 40,
    184.             label: {
    185.               text: 'Diamond',
    186.               padding: '2 4'
    187.             }
    188.           },
    189.           {
    190.             type: 'triangle',
    191.             id: 'myTriangle',
    192.             borderWidth: 2,
    193.             borderColor: '#03A9F4',
    194.             backgroundColor: '#03A9F4',
    195.             x: 480,
    196.             y: 230,
    197.             size: 40,
    198.             tooltip: {
    199.               text: 'I am a triangle'
    200.             },
    201.             label: {
    202.               offsetY: 50,
    203.               text: 'Triangle'
    204.             }
    205.           },
    206.           {
    207.             type: 'plus',
    208.             id: 'myPlus',
    209.             lineWidth: 8,
    210.             lineColor: '#4DB6AC',
    211.             x: 60,
    212.             y: 330,
    213.             size: 30,
    214.             label: {
    215.               text: 'Plus',
    216.               offsetY: 50,
    217.             }
    218.           },
    219.           {
    220.             type: 'cross',
    221.             id: 'myCross',
    222.             lineWidth: 8,
    223.             lineColor: '#4DB6AC',
    224.             x: 190,
    225.             y: 330,
    226.             size: 30,
    227.             label: {
    228.               text: 'Cross',
    229.               offsetY: 50,
    230.             }
    231.           },
    232.           {
    233.             type: 'line',
    234.             id: 'myLine',
    235.             lineWidth: 5,
    236.             lineColor: '#F44336',
    237.             points: [
    238.               [280, 310],
    239.               [340, 320],
    240.               [300, 350],
    241.               [380, 340]
    242.             ],
    243.             label: {
    244.               text: 'Line',
    245.               offsetY: 50
    246.             }
    247.           },
    248.           {
    249.             type: 'poly',
    250.             id: 'myPoly',
    251.             lineStyle: 'solid',
    252.             borderWidth: 2,
    253.             shadowDistance: 15,
    254.             borderColor: '#532',
    255.             backgroundColor: '#e91e63',
    256.             points: [
    257.               [450, 310],
    258.               [520, 310],
    259.               [520, 360],
    260.               [400, 380],
    261.               [450, 310],
    262.  
    263.             ],
    264.             label: {
    265.               text: 'Polygon'
    266.             }
    267.           }
    268.         ]
    269.       }]
    270.     };
    271.  
    272.     zingchart.render({
    273.       id: 'myChart',
    274.       data: chartConfig,
    275.       height: 400,
    276.       width: 600
    277.     });
    278.   </script>
    279. </body>
    280.  
    281. </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. let chartConfig = {
    2.   graphset: [{
    3.     type: 'null',
    4.     tooltip: {
    5.       padding: '10 20',
    6.       backgroundColor: '#333',
    7.       color: '#fff',
    8.       callout: true,
    9.       calloutPosition: 'bottom',
    10.       borderRadius: 10
    11.     },
    12.     shapes: [{
    13.         type: 'rect',
    14.         id: 'rect',
    15.         borderWidth: 2,
    16.         alpha: 0.5,
    17.         borderColor: '#f0f',
    18.         backgroundColor: '#09f #f09',
    19.         x: 50,
    20.         y: 100,
    21.         width: 50,
    22.         height: 100,
    23.         hoverState: {
    24.           backgroundColor: '#eee',
    25.           alpha: 0.4
    26.         },
    27.         label: {
    28.           text: 'Rect',
    29.           borderColor: '#333',
    30.           borderWidth: 2,
    31.           padding: 5,
    32.           alpha: 0.8
    33.         }
    34.       },
    35.       {
    36.         type: 'circle',
    37.         id: 'mycircle',
    38.         borderWidth: 2,
    39.         borderColor: '#f00',
    40.         backgroundColor: '#FF5722',
    41.         x: 150,
    42.         y: 100,
    43.         size: 40,
    44.         hoverState: {
    45.           backgroundColor: '#ff3d00'
    46.         },
    47.         label: {
    48.           text: 'Circle'
    49.         }
    50.       },
    51.       {
    52.         type: 'pie',
    53.         id: 'myPie',
    54.         borderWidth: 2,
    55.         borderColor: '#FFC107',
    56.         backgroundColor: '#FFEB3B',
    57.         x: 250,
    58.         y: 100,
    59.         size: 40,
    60.         angleStart: 0,
    61.         angleEnd: 330,
    62.         hoverState: {
    63.           alpha: 1,
    64.           angleEnd: 358,
    65.           backgroundColor: '#39d474',
    66.           borderColor: '#00ac42'
    67.         },
    68.         label: {
    69.           text: 'Pie',
    70.           padding: '2 4',
    71.           offsetY: 20
    72.         }
    73.       },
    74.       {
    75.         type: 'star5',
    76.         id: 'myStar5',
    77.         borderWidth: 2,
    78.         borderColor: '#01579B',
    79.         backgroundColor: '#0277BD #4FC3F7',
    80.         x: 360,
    81.         y: 100,
    82.         size: 25,
    83.         hoverState: {
    84.           backgroundColor: '#039BE5 #FFF',
    85.           size: 38,
    86.           type: 'star8',
    87.           alpha: 1
    88.         },
    89.         label: {
    90.           text: 'Star 5',
    91.           padding: '2 4'
    92.         }
    93.       },
    94.       {
    95.         type: 'star9',
    96.         id: 'myStar9',
    97.         borderWidth: 2,
    98.         borderColor: '#E65100',
    99.         fillType: 'radial',
    100.         gradientColors: '#FFF59D #FFC107 #F4511E',
    101.         gradientStops: '0.1 0.5 0.9',
    102.         x: 500,
    103.         y: 100,
    104.         size: 50,
    105.         label: {
    106.           text: 'Star 9',
    107.           fontColor: '#4d4d4d',
    108.           fontWeight: 'bold',
    109.           fontSize: 20,
    110.           padding: 10
    111.         },
    112.         hoverState: {
    113.           gradientColors: '#FBC02D #FFA000 #E65100',
    114.           gradientStops: '0.1 0.5 0.9'
    115.         }
    116.       },
    117.       {
    118.         type: 'pie',
    119.         id: 'myRing',
    120.         borderWidth: 0,
    121.  
    122.         backgroundColor: '#DCEDC8 #7CB342',
    123.         shadow: 0.4,
    124.         shadowDistance: 5,
    125.         hoverState: {
    126.           backgroundColor: '#FFEB3B #F44336',
    127.           angleStart: 180,
    128.           angleEnd: 540
    129.         },
    130.         x: 70,
    131.         y: 230,
    132.         size: 50,
    133.         slice: 30,
    134.         angleStart: 180,
    135.         angleEnd: 450,
    136.         tooltip: {
    137.           text: 'Gauge'
    138.         },
    139.         label: {
    140.           text: 'Ring'
    141.         }
    142.       },
    143.       {
    144.         type: 'square',
    145.         id: 'mySquare',
    146.         borderWidth: 5,
    147.         borderColor: 5,
    148.         backgroundColor: '#0277BD',
    149.         x: 200,
    150.         y: 230,
    151.         size: 40,
    152.         label: {
    153.           text: 'Square',
    154.           padding: '2 4'
    155.         },
    156.         tooltip: {
    157.           text: 'I am a square'
    158.         }
    159.       },
    160.       {
    161.         type: 'diamond',
    162.         id: 'myDiamond',
    163.         borderWidth: 2,
    164.         borderColor: '#00C853',
    165.         backgroundColor: '#00E676',
    166.         x: 330,
    167.         y: 230,
    168.         size: 40,
    169.         label: {
    170.           text: 'Diamond',
    171.           padding: '2 4'
    172.         }
    173.       },
    174.       {
    175.         type: 'triangle',
    176.         id: 'myTriangle',
    177.         borderWidth: 2,
    178.         borderColor: '#03A9F4',
    179.         backgroundColor: '#03A9F4',
    180.         x: 480,
    181.         y: 230,
    182.         size: 40,
    183.         tooltip: {
    184.           text: 'I am a triangle'
    185.         },
    186.         label: {
    187.           offsetY: 50,
    188.           text: 'Triangle'
    189.         }
    190.       },
    191.       {
    192.         type: 'plus',
    193.         id: 'myPlus',
    194.         lineWidth: 8,
    195.         lineColor: '#4DB6AC',
    196.         x: 60,
    197.         y: 330,
    198.         size: 30,
    199.         label: {
    200.           text: 'Plus',
    201.           offsetY: 50,
    202.         }
    203.       },
    204.       {
    205.         type: 'cross',
    206.         id: 'myCross',
    207.         lineWidth: 8,
    208.         lineColor: '#4DB6AC',
    209.         x: 190,
    210.         y: 330,
    211.         size: 30,
    212.         label: {
    213.           text: 'Cross',
    214.           offsetY: 50,
    215.         }
    216.       },
    217.       {
    218.         type: 'line',
    219.         id: 'myLine',
    220.         lineWidth: 5,
    221.         lineColor: '#F44336',
    222.         points: [
    223.           [280, 310],
    224.           [340, 320],
    225.           [300, 350],
    226.           [380, 340]
    227.         ],
    228.         label: {
    229.           text: 'Line',
    230.           offsetY: 50
    231.         }
    232.       },
    233.       {
    234.         type: 'poly',
    235.         id: 'myPoly',
    236.         lineStyle: 'solid',
    237.         borderWidth: 2,
    238.         shadowDistance: 15,
    239.         borderColor: '#532',
    240.         backgroundColor: '#e91e63',
    241.         points: [
    242.           [450, 310],
    243.           [520, 310],
    244.           [520, 360],
    245.           [400, 380],
    246.           [450, 310],
    247.  
    248.         ],
    249.         label: {
    250.           text: 'Polygon'
    251.         }
    252.       }
    253.     ]
    254.   }]
    255. };
    256.  
    257. zingchart.render({
    258.   id: 'myChart',
    259.   data: chartConfig,
    260.   height: 400,
    261.   width: 600
    262. });