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