تجسم: نمودار خطی (تصویر)

مهم: بخش نمودارهای تصویری ابزار نمودار Google از 20 آوریل 2012 رسماً منسوخ شده است . طبق خط مشی منسوخ شدن ما به کار خود ادامه خواهد داد.

  1. بررسی اجمالی
  2. مثال
  3. بارگذاری
  4. فرمت داده
  5. گزینه های پیکربندی
  6. مواد و روش ها
  7. مناسبت ها
  8. سیاست داده

بررسی اجمالی

نمودار خطی که با استفاده از Google Charts API به صورت تصویر ارائه می‌شود.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagelinechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagelinechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagelinechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

بارگذاری

نام بسته google.charts.load "imagelinechart" است.

  google.charts.load('current', {packages: ['imagelinechart']});

نام کلاس تجسم google.visualization.ImageLineChart است.

  var visualization = new google.visualization.ImageLineChart(container);

فرمت داده

ستون اول باید یک رشته باشد و حاوی برچسب دسته باشد. هر تعداد ستون می تواند دنبال شود، همه باید عددی باشند. هر ستون به صورت یک خط جداگانه نمایش داده می شود.

گزینه های پیکربندی

نام تایپ کنید پیش فرض شرح
رنگ پس زمینه رشته "#FFFFFF" (سفید) رنگ پس‌زمینه نمودار در قالب رنگ Chart API .
رنگ ها آرایه <رشته> خودکار از این برای اختصاص رنگ های خاص به هر سری داده استفاده کنید. رنگ ها در قالب رنگ Chart API مشخص می شوند. رنگ i برای ستون داده i استفاده می‌شود، اگر تعداد ستون‌های داده بیشتر از رنگ‌ها باشد، تا ابتدا بسته می‌شود. اگر تنوع یک رنگ برای همه سری ها قابل قبول است، به جای آن از گزینه color استفاده کنید.
enableEvents بولی نادرست باعث می شود نمودارها رویدادهای ایجاد شده توسط کاربر مانند کلیک یا ماوس را روی آن پرتاب کنند. فقط برای انواع نمودار خاص پشتیبانی می شود. رویدادهای زیر را ببینید.
ارتفاع عدد ارتفاع کانتینر ارتفاع نمودار بر حسب پیکسل
افسانه رشته 'درست' موقعیت و نوع افسانه. می تواند یکی از موارد زیر باشد:
  • "راست" - در سمت راست نمودار.
  • "چپ" - در سمت چپ نمودار.
  • "بالا" - بالای نمودار.
  • "پایین" - زیر نمودار.
  • "هیچ" - هیچ افسانه ای نمایش داده نمی شود.
حداکثر عدد خودکار حداکثر مقدار برای نشان دادن در محور Y.
دقیقه عدد خودکار حداقل مقدار برای نشان دادن در محور Y.
showAxisLines بولی درست است، واقعی اگر روی false تنظیم شود، خطوط محور و برچسب ها را حذف می کند.
نشان دادن دسته بندی برچسب ها بولی همانند showAxisLines اگر روی false تنظیم شود، برچسب های دسته ها (برچسب های محور X) را حذف می کند.
showValueLabels بولی همانند showAxisLines اگر روی false تنظیم شود، برچسب های مقادیر (برچسب های محور Y) را حذف می کند.
عنوان رشته بدون عنوان متن برای نمایش در بالای نمودار.
valueLabelsInterval عدد خودکار فاصله زمانی که در آن برچسب های محور ارزش نشان داده می شود. برای مثال، اگر min 0، max 100، و valueLabelsInterval 20 باشد، نمودار برچسب های محور را در (0، 20، 40، 60، 80 100) نشان می دهد.
عرض عدد عرض کانتینر عرض نمودار بر حسب پیکسل

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نمودار را رسم می کند.

مناسبت ها

می توانید برای شنیدن رویدادهای شرح داده شده در صفحه نمودار تصویر عمومی ثبت نام کنید.

سیاست داده

لطفاً به خط مشی ورود به سیستم نمودار API مراجعه کنید.