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