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