• 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.     var myConfig = {
    17.       type: 'area',
    18.       title: {
    19.         text: 'scaleX markers'
    20.       },
    21.       scaleX: {
    22.         values: '-100:100:20',
    23.         markers: [{
    24.             type: 'line',
    25.             range: [-90],
    26.             valueRange: true,
    27.             lineColor: 'red',
    28.             lineWidth: 2,
    29.             lineStyle: 'solid',
    30.             alpha: 1,
    31.  
    32.             mediaRules: [{
    33.               maxWidth: 400,
    34.               lineColor: 'blue',
    35.             }]
    36.           },
    37.           {
    38.             type: 'area',
    39.             range: [-60, -20],
    40.             valueRange: true,
    41.             backgroundColor: 'red',
    42.  
    43.             mediaRules: [{
    44.               maxWidth: 400,
    45.               backgroundColor: 'blue',
    46.             }]
    47.           },
    48.           {
    49.             type: 'line',
    50.             range: [20, 60],
    51.             valueRange: true,
    52.             lineColor: 'red',
    53.             lineWidth: 2,
    54.             lineStyle: 'solid',
    55.             alpha: 1,
    56.  
    57.             mediaRules: [{
    58.               maxWidth: 400,
    59.               lineColor: 'blue',
    60.             }]
    61.           },
    62.           {
    63.             type: 'area',
    64.             range: [80, 90, 65, 85],
    65.             valueRange: true,
    66.             backgroundColor: 'red',
    67.  
    68.             mediaRules: [{
    69.               maxWidth: 400,
    70.               backgroundColor: 'blue',
    71.             }]
    72.           },
    73.         ]
    74.       },
    75.       scaleY: {
    76.         values: '-100:100:25'
    77.       },
    78.       plot: {
    79.         aspect: 'stepped'
    80.       },
    81.       series: [{
    82.         values: [
    83.           [-100, 0],
    84.           [-90, 31],
    85.           [-80, 64],
    86.           [-70, 35],
    87.           [-60, 5],
    88.           [-50, -30],
    89.           [-40, -59],
    90.           [-30, -34],
    91.           [-20, 15],
    92.           [-10, 90],
    93.           [0, -34],
    94.           [10, -70],
    95.           [20, 39],
    96.           [30, 70],
    97.           [40, 80],
    98.           [50, 69],
    99.           [60, 45],
    100.           [70, 20],
    101.           [80, -91],
    102.           [90, -45],
    103.           [100, 0]
    104.         ],
    105.         lineColor: '#009688',
    106.         backgroundColor: '#009688',
    107.         marker: {
    108.           backgroundColor: '#009688'
    109.         }
    110.       }]
    111.     };
    112.  
    113.     zingchart.render({
    114.       id: 'myChart',
    115.       data: myConfig,
    116.       height: 400,
    117.       width: '100%'
    118.     });
    119.   </script>
    120. </body>
    121.  
    122. </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. var myConfig = {
    2.   type: 'area',
    3.   title: {
    4.     text: 'scaleX markers'
    5.   },
    6.   scaleX: {
    7.     values: '-100:100:20',
    8.     markers: [{
    9.         type: 'line',
    10.         range: [-90],
    11.         valueRange: true,
    12.         lineColor: 'red',
    13.         lineWidth: 2,
    14.         lineStyle: 'solid',
    15.         alpha: 1,
    16.  
    17.         mediaRules: [{
    18.           maxWidth: 400,
    19.           lineColor: 'blue',
    20.         }]
    21.       },
    22.       {
    23.         type: 'area',
    24.         range: [-60, -20],
    25.         valueRange: true,
    26.         backgroundColor: 'red',
    27.  
    28.         mediaRules: [{
    29.           maxWidth: 400,
    30.           backgroundColor: 'blue',
    31.         }]
    32.       },
    33.       {
    34.         type: 'line',
    35.         range: [20, 60],
    36.         valueRange: true,
    37.         lineColor: 'red',
    38.         lineWidth: 2,
    39.         lineStyle: 'solid',
    40.         alpha: 1,
    41.  
    42.         mediaRules: [{
    43.           maxWidth: 400,
    44.           lineColor: 'blue',
    45.         }]
    46.       },
    47.       {
    48.         type: 'area',
    49.         range: [80, 90, 65, 85],
    50.         valueRange: true,
    51.         backgroundColor: 'red',
    52.  
    53.         mediaRules: [{
    54.           maxWidth: 400,
    55.           backgroundColor: 'blue',
    56.         }]
    57.       },
    58.     ]
    59.   },
    60.   scaleY: {
    61.     values: '-100:100:25'
    62.   },
    63.   plot: {
    64.     aspect: 'stepped'
    65.   },
    66.   series: [{
    67.     values: [
    68.       [-100, 0],
    69.       [-90, 31],
    70.       [-80, 64],
    71.       [-70, 35],
    72.       [-60, 5],
    73.       [-50, -30],
    74.       [-40, -59],
    75.       [-30, -34],
    76.       [-20, 15],
    77.       [-10, 90],
    78.       [0, -34],
    79.       [10, -70],
    80.       [20, 39],
    81.       [30, 70],
    82.       [40, 80],
    83.       [50, 69],
    84.       [60, 45],
    85.       [70, 20],
    86.       [80, -91],
    87.       [90, -45],
    88.       [100, 0]
    89.     ],
    90.     lineColor: '#009688',
    91.     backgroundColor: '#009688',
    92.     marker: {
    93.       backgroundColor: '#009688'
    94.     }
    95.   }]
    96. };
    97.  
    98. zingchart.render({
    99.   id: 'myChart',
    100.   data: myConfig,
    101.   height: 400,
    102.   width: '100%'
    103. });