Cara Singkat Bagaimana menggunakan AnyCharts

anycharts

AnyCharts adalah solusi berbasis JavaScript (HTML5) fleksibel yang memungkinkan pengembang untuk menanamkan diagram dan dasbor yang interaktif dan hebat ke dalam proyek web, mandiri atau seluler.

Pengguna Anychart hampir sama dengan Google Charts dan Highcharts. Anychart library membuat anda dengan mudah menggunakannya Anda hanya menempatkannya dalam form Anda. Berikut library yang mesti anda gunakan.

<!--code install AnyCharts-->
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.4.1/themes/dark_earth.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
<link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />

Bagaimana mengimlementasikannya kedalam Form ?

Kami akan memberikan contoh bagaimana mengimplementasikan langsung library di atas kedalam form. buat file dengan nama index.html kemudian masukkan library pada form yang dibuat.

<!DOCTYPE html>
<html>
<head>
 <title>AnyCharts</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <script src="bootstrap/js/bootstrap.min.js"></script>
 
 <!--code install AnyCharts-->
 <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.4.1/themes/dark_earth.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />
  <style>
    #container {
      width: 100%;
      height: 500px;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
 <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
    <ul class="nav navbar-nav">
     <li class="active"><a href="index.html">Home</a></li>
    </ul>
   </div>
  </div>
 </nav>
 <div class="container">
  <div class="row">
      <div id="container"></div>

    </div>
  </div>
        <script type="text/javascript">
        anychart.onDocumentReady(function() {
          anychart.theme('darkEarth');
  // create column chart
  var chart = anychart.column();

  // turn on chart animation
  chart.animation(true);

  // set chart title text settings
  chart.title('Top 10 Buah-Buahan Enak Yang ada Dikampungku');

  // create area series with passed data
  var series = chart.column([
    ['Mangga', '5000'],
    ['Timun', '6000'],
    ['Nangka', '10000'],
    ['Nanas', '3000'],
    ['Apple', '2000'],
    ['Semangka', '14360'],
    ['Durian', '7670'],
    ['Lobe-Lobe', '13210'],
    ['Kaluatere', '9980']
    ]);

  // set series tooltip settings
  series.tooltip().titleFormat('{%X}');

  series.tooltip()
  .position('center-top')
  .anchor('center-bottom')
  .offsetX(0)
  .offsetY(5)
  .format('Rp{%Value}{groupsSeparator: }');

  // set scale minimum
  chart.yScale().minimum(0);

  // set yAxis labels formatter
  chart.yAxis().labels().format('Rp{%Value}{groupsSeparator: }');

  // tooltips position and interactivity settings
  chart.tooltip().positionMode('point');
  chart.interactivity().hoverMode('by-x');

  // axes titles
  chart.xAxis().title('Product');
  chart.yAxis().title('Revenue');

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});
</script>
</body>
</html>

Kalian bisa mendownload filenya langsung dengan menekan link button di bawah ini, kalian bisa modifikasi sesuai dengan kebutuhan Anda, atau silahkan berkunjung ke website Anycharts, untuk grafik yang beragam.

Baca Juga :

Sekian share kali ini semoga apa yang kami share bermanfaat bagi Anda, jika kalian belum paham silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *