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