تجسم: Sparkline (تصویر)

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

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

بررسی اجمالی

خطوط جرقه منفرد یا چندگانه که با تصاویر با استفاده از Google Charts API ارائه می شوند. تصاویر در یک جدول HTML قرار دارند.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

بارگذاری

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

  google.charts.load("current", {packages: ["imagesparkline"]});

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

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

فرمت داده

هر تعداد ستون تمام ستون ها باید اعداد باشند. هر ستون به صورت یک خط جرقه نمایش داده می شود.

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

نام تایپ کنید پیش فرض شرح
رنگ رشته رنگی را برای استفاده برای همه نمودارها مشخص می کند. رشته ای با فرمت #rrggbb. به عنوان مثال: '#00cc00'. فقط در صورتی استفاده می شود که گزینه colors مشخص نشده باشد.
رنگ ها آرایه رشته ها رنگ های پیش فرض رنگ هایی که برای ستون های داده استفاده می شود. آرایه ای از رشته ها که در آن هر عنصر یک رشته با فرمت #rrggbb است. به عنوان مثال: '#00cc00'. رنگ i برای ستون داده i استفاده می شود. اگر تعداد رنگ‌ها از تعداد ستون‌ها کمتر باشد، انتخاب رنگ به اطراف می‌پیچد.
پر کردن بولی نادرست اگر درست باشد، ناحیه زیر خط را با رنگ پر می کند.
ارتفاع عدد ارتفاع کانتینر ارتفاع تصاویر بر حسب پیکسل
label موقعیت رشته هیچ یک موقعیت برچسب ها مقادیر پشتیبانی شده «هیچ»، «چپ»، «راست» هستند.
حداکثر آرایه اعداد حداکثر مقدار داده هر جرقه بالاترین مقدار برای محدوده مقدار داده هر خط جرقه. شاخص موجود در آرایه باید با نمایه ستون در DataTable مطابقت داشته باشد. اگر همه مقادیر null باشند، این حداکثر مقدار در سری خواهد بود.
دقیقه آرایه اعداد حداقل مقدار داده هر جرقه کمترین مقدار برای محدوده مقدار داده هر خط جرقه. شاخص موجود در آرایه باید با نمایه ستون در DataTable مطابقت داشته باشد. اگر همه مقادیر null باشند، این مقدار حداقل در سری خواهد بود.
showAxisLines بولی درست است، واقعی اگر درست باشد، خطوط محور نشان داده می شوند. اگر نادرست باشد، اینطور نیست و پیش‌فرض showValueLabels نادرست است.
showValueLabels بولی درست است، به جز زمانی که showAxisLines نادرست است. اگر درست باشد، برچسب‌های محور مقدار نشان داده می‌شوند.
عنوان آرایه رشته ها هیچ عنوانی نمایش داده نمی شود عناوینی برای استفاده برای هر خط جرقه.
عرض عدد عرض کانتینر عرض نمودارها، بر حسب پیکسل.
چیدمان رشته 'v' طرح بندی عمودی یا افقی: 'v' برای عمودی، 'h' برای افقی.

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نمودار را رسم می کند.
getSelection() آرایه ای از عناصر انتخاب شاخص های نمودارهای انتخاب شده را به عنوان آرایه ای از اشیاء برمی گرداند. هر شی دارای یک ویژگی ستونی است که شامل شماره ستون یک sparkline انتخاب شده است. می تواند بیش از یک ستون انتخابی را برگرداند.
setSelection(selection) هیچ یک خطوط جرقه ای مشخص شده را انتخاب می کند و هر خط جرقه ای را که مشخص نشده است از حالت انتخاب خارج می کند. انتخاب آرایه ای از اشیاء است که هر کدام دارای یک ویژگی column عددی است که شاخص خط جرقه انتخاب شده است. برای اطلاعات بیشتر به setSelection() مراجعه کنید.

مناسبت ها

نام شرح خواص
انتخاب کنید رویداد انتخاب استاندارد هیچ یک

سیاست داده

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