نمودارهای تفاوت

• بررسی اجمالی
• مثال ها
  • نمودارهای پراکندگی تفاوت
  • نمودارهای پای متفاوت
  • نمودارهای میله و ستون تفاوت

بررسی اجمالی

نمودار تفاوت نموداری است که برای برجسته کردن تفاوت بین دو نمودار با داده های قابل مقایسه طراحی شده است. با برجسته کردن تغییرات بین مقادیر مشابه، آنها می توانند تغییرات بین مجموعه داده ها را آشکار کنند.

شما یک نمودار تفاوت را با فراخوانی متد computeDiff با دو مجموعه داده ایجاد می‌کنید تا مجموعه داده سومی که تفاوت را نشان می‌دهد ایجاد کنید و سپس آن را ترسیم کنید.

نمودارهای تفاوت برای نمودارهای میله ای ، نمودارهای ستونی ، نمودارهای دایره ای و نمودارهای پراکنده در دسترس هستند.

مثال ها

در این بخش، نمونه ها و نمونه کدهای مربوط به هر نوع نمودار متفاوت را مشاهده خواهید کرد.

نمودارهای پراکندگی تفاوت

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

اگر این دو نمودار را به چشم بیاورید، می توانید بگویید که چیزی تغییر کرده است، اما تشخیص دقیقاً چه چیزی دشوار است. نمودار پراکندگی تفاوت با نشان دادن مسیر هر نقطه داده آن را روشن می کند.

در اینجا خطوط کلیدی ایجاد کننده سه نمودار بالا آمده است:

// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));

// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);

// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);

می توانید کدورت دم ها را با گزینه diff.oldData.opacity و کدورت نقاط داده جدید را با گزینه diff.newData.opacity تغییر دهید:

نمودارهای پای متفاوت

در اینجا کد تولید هر سه نمودار آمده است:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 256070], ['Education', 108034],
      ['Social Sciences & History', 127101], ['Health', 81863],
      ['Psychology', 74194]]);

    var newData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 358293], ['Education', 101265],
      ['Social Sciences & History', 172780], ['Health', 129634],
      ['Psychology', 97216]]);

    var options = { pieSliceText: 'none' };

    var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
    var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
    var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

    chartBefore.draw(oldData, options);
    chartAfter.draw(newData, options);

    var diffData = chartDiff.computeDiff(oldData, newData);
    chartDiff.draw(diffData, options);
  }
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>

می توانید اندازه نسبی دایره ها را با diff.innerCircle.radiusFactor ، مرز بین این دو را با diff.innerCircle.borderFactor ، و شفافیت هر یک را با diff.oldData.opacity و diff.newData.opacity کنترل کنید. در نهایت، می‌توانید رفتار را معکوس کنید تا قدیمی‌ترین داده‌ها جدیدترین داده‌ها را با diff.oldData.inCenter احاطه کنند. نمونه ای از هر کدام:

نمودارهای میله و ستون تفاوت

نمودارهای نوار تفاوت و ستون تفاوت، داده‌های جدیدتر را روی داده‌های قدیمی‌تر می‌پوشانند. در اینجا، ما دو نمودار ستونی ساده - یکی از داده‌های قدیمی، دیگری از جدید - را می‌گیریم و آنها را متفاوت می‌کنیم:

برای مثالی پیچیده‌تر، بیایید ببینیم محبوبیت برخی از نام‌ها (به ویژه نام کارآموزان تابستانی Google Visualization) از دهه 1980 تا به امروز چگونه تغییر کرده است (اعداد به ازای میلیون‌ها نوزاد، با حسن نیت از جادوگر نام نوزاد ) تغییر کرده است. .

کد تولید هر چهار نمودار:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = { legend: { position: 'top' } };

    colChartBefore.draw(oldData, options);
    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);
    colChartDiff.draw(diffData, options);
    barChartDiff.draw(diffData, options);
  }
</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

نمودارهای ستونی و میله‌ای diff به شما امکان می‌دهند با استفاده از گزینه diff.newData.widthFactor ، عرض نسبی نوارهای قدیمی و جدید را کنترل کنید: