تکنیک های ترسیم نمودار

این صفحه راه‌های مختلفی را فهرست می‌کند که می‌توانید نمونه‌سازی کنید و نموداری را روی صفحه بکشید. هر روش دارای مزایا و معایبی است که در زیر ذکر شده است.

فهرست

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. اطلاعات بیشتر

chart.draw()

این روش پایه ای است که در نمودار سلام ارائه شده است! مثال در این مستندات در اینجا مراحل اساسی وجود دارد:

  1. بارگیری کتابخانه gstatic، Google Visualization و کتابخانه های نمودار را بارگیری کنید
  2. داده های خود را آماده کنید
  3. هر گزینه نمودار را آماده کنید
  4. کلاس نمودار را نمونه‌سازی کنید و یک دسته را به عنصر ظرف صفحه منتقل کنید.
  5. اختیاری برای دریافت هر گونه رویداد نمودار ثبت نام کنید. اگر قصد فراخوانی متدها در نمودار را دارید، باید به رویداد "آماده" گوش دهید.
  6. chart.draw() را فراخوانی کنید، داده ها و گزینه ها را ارسال کنید.

مزایای:

  • شما بر هر مرحله از فرآیند کنترل کامل دارید.
  • شما می توانید برای گوش دادن به همه رویدادهای نمودار ثبت نام کنید.

معایب:

  • پرمخاطب
  • شما باید به صراحت تمام کتابخانه های نمودار مورد نیاز را بارگیری کنید.
  • اگر درخواست ارسال می کنید، باید به صورت دستی برای پاسخ به تماس پیاده سازی کنید، موفقیت را بررسی کنید، DataTable برگشتی را استخراج کنید و آن را به نمودار ارسال کنید.

مثال:

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ChartWrapper

ChartWrapper یک کلاس راحتی است که بارگیری تمام کتابخانه های نمودار مناسب را برای شما انجام می دهد و همچنین ارسال پرس و جوها به منابع داده ابزار نمودار را ساده می کند.

مزایای:

  • کد بسیار کمتر
  • تمام کتابخانه های نمودار مورد نیاز را برای شما بارگیری می کند
  • با ایجاد آبجکت Query و رسیدگی به فراخوانی برای شما، جستجوی منابع داده را بسیار آسان‌تر می‌کند
  • شناسه عنصر کانتینر را وارد کنید و getElementByID را برای شما فراخوانی می کند.
  • داده‌ها را می‌توان در قالب‌های مختلفی ارسال کرد: به‌عنوان آرایه‌ای از مقادیر، به‌عنوان یک رشته تحت اللفظی JSON یا به‌عنوان یک دسته DataTable

معایب:

  • ChartWrapper در حال حاضر فقط رویدادهای انتخاب، آماده و خطا را منتشر می کند. برای دریافت سایر رویدادها، باید یک دسته به نمودار پیچیده شده و در رویدادهای آنجا مشترک شوید. برای مثال به مستندات ChartWrapper مراجعه کنید.

مثال ها:

در اینجا نمونه ای از نمودار ستونی با داده های محلی ساخته شده به عنوان یک آرایه است. شما نمی توانید برچسب های نمودار یا مقادیر datetime را با استفاده از نحو آرایه مشخص کنید، اما می توانید به صورت دستی یک شی DataTable با این مقادیر ایجاد کنید و آن را به ویژگی dataTable منتقل کنید.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

در اینجا نمونه ای از نمودار خطی است که داده های خود را با پرس و جو در صفحه گسترده گوگل دریافت می کند. توجه داشته باشید که کد نیازی به رسیدگی به پاسخ تماس ندارد.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

همراه با بارگیری خودکار ، این می تواند کد بسیار فشرده ای را ایجاد کند:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

استفاده از ویرایشگر نمودار با ChartWrapper

می‌توانید از گفتگوی ویرایشگر نمودار ساخته شده در صفحات گسترده Google برای طراحی نمودار استفاده کنید و سپس رشته ChartWrapper را درخواست کنید که نمودار را نشان می‌دهد. سپس می توانید این رشته را کپی و جایگذاری کنید و همانطور که در بالا توضیح داده شد در ChartWrapper از آن استفاده کنید.

می توانید یک ویرایشگر نمودار را در صفحه خود جاسازی کنید و روش هایی را برای کاربران برای اتصال به منابع داده دیگر و بازگرداندن رشته ChartWrapper قرار دهید. برای اطلاعات بیشتر به مستندات مرجع ChartEditor مراجعه کنید.

DrawChart()

DrawChart یک روش استاتیک جهانی است که ChartWrapper می‌پیچد.

مزایای:

  • مانند ChartWrapper ، اما برای استفاده کمی کوتاهتر است.

معایب:

  • دسته ای را به لفاف باز نمی گرداند، بنابراین نمی توانید هیچ رویدادی را مدیریت کنید.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

اطلاعات بیشتر