ช่วงเวลา

  1. ภาพรวม
  2. ช่วงเส้น
  3. ช่วงบาร์
  4. ช่วง Box
  5. ช่วงการคงอยู่
  6. ช่วงคะแนน
  7. ช่วงระยะเวลา
  8. การรวมรูปแบบช่วงเวลา

ภาพรวม

Google Charts จะแสดงช่วงของชุดหนังสือได้ โดยอาจใช้เพื่อแสดงช่วงความเชื่อมั่น ค่าต่ําสุดและค่าสูงสุดรอบๆ ค่า การสุ่มตัวอย่างแบบเปอร์เซ็นไทล์ หรืออะไรก็ได้ที่ต้องใช้อัตรากําไรที่ต่างกันรอบชุด

ช่วงมี 6 รูปแบบ ได้แก่ เส้น แท่ง แท่ง จุด และพื้นที่ ด้านล่างนี้คือตัวอย่างของแต่ละรายการ ในแต่ละตัวอย่าง เราจะใช้ชุดข้อมูลเดียวกันซึ่งแสดงโดยไม่มีช่วงเวลา

แผนภูมิด้านบนแบบง่ายมีชุดข้อมูล 7 แบบ ซึ่งมีความสําคัญเท่ากันทั้งหมด หลังจากนั้น เราจะสันนิษฐานว่าซีรีส์แรกเป็นซีรีส์หลัก และอีก 6 ชุดกําลังเปรียบเทียบผ่านช่วงเวลา

ช่วงเส้น

บางครั้งช่วงเส้นจะใช้เพื่อแสดงความแปรปรวนของการทดสอบหลายรายการ ในแผนภูมิต่อไปนี้ เราจะอธิบายซีรีส์หลักและช่วงเวลาในซีรีส์นั้น

 
<html>
  <head>
    <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 data = new google.visualization.DataTable();
        data.addColumn('number', 'x');
        data.addColumn('number', 'values');
        data.addColumn({id:'i0', type:'number', role:'interval'});
        data.addColumn({id:'i1', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
  
        data.addRows([
            [1, 100, 90, 110, 85, 96, 104, 120],
            [2, 120, 95, 130, 90, 113, 124, 140],
            [3, 130, 105, 140, 100, 117, 133, 139],
            [4, 90, 85, 95, 85, 88, 92, 95],
            [5, 70, 74, 63, 67, 69, 70, 72],
            [6, 30, 39, 22, 21, 28, 34, 40],
            [7, 80, 77, 83, 70, 77, 85, 90],
            [8, 100, 90, 110, 85, 95, 102, 110]]);
  
        // The intervals data as narrow lines (useful for showing raw source data)
        var options_lines = {
            title: 'Line intervals, default',
            curveType: 'function',
            lineWidth: 4,
            intervals: { 'style':'line' },
            legend: 'none'
        };
  
        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
        chart_lines.draw(data, options_lines);
      }
    </script>
  </head>
  <body>
    <div id="chart_lines" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ในข้อมูลข้างต้น คุณจะเห็นว่าเราได้แนบตัวระบุที่แตกต่างกัน 3 ประเภทไปยังชุดส่วนเสริม ได้แก่ i0, i2 และ i3 เราสามารถจัดรูปแบบสไตล์เหล่านั้นให้แตกต่างกันได้ โดยเรามอบสีและความหนาที่แตกต่างกัน

หมายเหตุ: โดยทั่วไปแล้ว การนํารหัสมาใช้ซ้ํานั้นทําได้ยาก ดังที่เราปฏิบัติตามข้างต้น และมีการใช้งาน i2 4 ครั้ง วิธีนี้ได้ผล แต่เราอาจเปลี่ยนแปลงพฤติกรรมนี้ในอนาคต

ความแตกต่างเพียงอย่างเดียวจากตัวเลือกมีดังนี้

    var options_lines = {
        title: 'Line intervals, tailored',
        lineWidth: 4,
        curveType:'function',
        interval: {
            'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
            'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
            'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
        },
        legend: 'none',
    };

ช่วงบาร์

ช่วงแท่งจะสร้างแถบข้อผิดพลาดเกี่ยวกับข้อมูล คอลัมน์แรกและสุดท้ายของช่วงเวลาจะวาดเป็นแถบกว้างขนานกับแกนโดเมน และคอลัมน์ภายในจะวาดเป็น "เครื่องหมายถูก" ที่สั้นกว่า ระบบจะเพิ่ม "สติ๊ก" เพื่อเข้าร่วมแถบแบบกว้าง (หากแท่ง 2 แท่งมีค่าเท่ากัน ระบบจะแสดงผลแท่งเป็นจุด ยกเว้นกรณีที่ตัวเลือก pointSize เป็น 0)

ความกว้างของแถบแนวนอนที่ตรงกับคอลัมน์แรกและคอลัมน์สุดท้ายจะควบคุมด้วย intervals.barWidth และความกว้างของแถบแนวนอนที่ตรงกับคอลัมน์ภายในจะควบคุมด้วย intervals.shortBarWidth หากละเว้นการตั้งค่าเหล่านี้ คุณจะเห็นแผนภูมิที่คล้ายกับตัวเลือกด้านบน พร้อมด้วยตัวเลือกด้านล่าง

    var options_bars = {
        title: 'Bars, default',
        curveType: 'function',
        series: [{'color': '#D9544C'}],
        intervals: { style: 'bars' },
        legend: 'none',
    };

ช่วงระยะเวลา

ช่วง Box ที่แสดงผลในตารางข้อมูลเป็นชุดสี่เหลี่ยมผืนผ้าที่ซ้อนกัน คอลัมน์แรกและคอลัมน์สุดท้ายจะแสดงเป็นสี่เหลี่ยมผืนผ้าด้านนอกสุด ส่วนคอลัมน์ภายในจะแสดงผลเป็นสี่เหลี่ยมผืนผ้าที่มืดยิ่งขึ้นซึ่งอยู่ภายในกล่อง

วิธีระบุช่วงเวลาของช่อง

    var options = {
        series: [{'color': '#1A8763'}],
        intervals: { style: 'boxes' },
        legend: 'none',
    };

คุณทําให้ช่องดูโดดเด่นขึ้นได้ด้วยตัวเลือก intervals.lineWidth และ intervals.barWidth

ตัวเลือกที่เกี่ยวข้องมีดังนี้

    var options = {
        title:'Boxes, thick',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
        legend: 'none',
    };

ช่วงการคงอยู่

ช่วงคงที่ แสดงคู่คอลัมน์เป็นชุดไม้ขนานกับแกนเป้าหมาย สติ๊กของความสูง 0 ตําแหน่งที่แสดงผลเป็นจุด ซึ่งระงับได้โดยการตั้งค่าตัวเลือก pointSize เป็น 0

คุณสร้างรายการเหล่านี้ได้ด้วย style จาก 'sticks'

    var options_sticks = {
        title:'Sticks, default',
        curveType:'function',
        series: [{'color': '#E7711B'}],
        intervals: { style: 'sticks' },
        legend: 'none',
    };

ช่วงคะแนน

จุดจุด แสดงข้อมูลช่วงเป็นวงกลมขนาดเล็ก:

ควบคุมขนาดจุดได้ด้วยตัวเลือก intervals.pointSize วันนี้มี 2 รายการ

    var options_points = {
        title:'Points, default',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'style':'points', pointSize: 2 },
        legend: 'none',
    };

ซึ่งมีลักษณะดังนี้ เวลา 8:00 น.

ช่วงระยะเวลา

ช่วงพื้นที่จะแสดงข้อมูลช่วงเป็นชุดพื้นที่แรเงาที่ซ้อนอยู่ การฝังคอลัมน์คู่กับคอลัมน์ที่ตรงกันกับช่วงของคอลัมน์ เว้นแต่จะระบุจํานวนคอลัมน์เท่าๆ กัน

ซึ่งทําได้ด้วยการตั้งค่า style เป็น 'area' 

    var options = {
        title:'Area, default',
        curveType:'function',
        series: [{'color': '#F1CA3A'}],
        intervals: { 'style':'area' },
        legend: 'none',
    };

การรวมรูปแบบช่วงเวลา

หากต้องการปรับแต่งเพิ่มเติม คุณสามารถรวมรูปแบบช่วงเวลาไว้ในแผนภูมิเดียว

นี่คือแผนภูมิที่รวมพื้นที่และช่วงแท่ง

ในแผนภูมิด้านบน เราระบุ style จาก 'bars' สําหรับช่วงที่ติดแท็กด้วย i0 และ i1 และรูปแบบ 'area' สําหรับ i2 จากนั้นเราจะใช้ pointSize ในการกําหนดขีดจํากัดแถบ ดังนี้

    var options = {
        title:'Bar/area interval chart',
        curveType:'function',
        intervals: { 'color':'series-color' },
        interval: {
            'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
        legend: 'none',
    };

นี่คือแผนภูมิเส้นแบบช่วงเวลาที่มีช่วง i2 เป็นแท่ง

    var options = {
        title:'Sticks, horizontal',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#E7711B'}],
        intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 1 }
        },
        legend: 'none',
    };

นี่คือแผนภูมิเส้นช่วงที่ใช้ช่องความทึบแสงต่ําเพื่อวางช่วงเวลาที่เลือกในเบื้องหลัง

    // Focus is the error bars, but boxes are visible in the background.
    var options_boxes_background = {
        title:'Background boxes',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 0, 'fillOpacity': 0.2 }
        },
        legend: 'none',
    };

เราสร้างแผนภูมิช่วง "จุดและหนวดเครา" ได้โดยระบุรูปแบบ 'points' ความทึบแสงต่ําสําหรับ 1 ช่วง พร้อมกับ boxWidth

    var options = {
        title:'Points and whiskers',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
            'lineWidth': 0, 'fillOpacity': 0.3 }
        },
        legend: 'none',
    };

พล็อตกล่อง

สุดท้าย ที่แผนภูมิ "จุดและหนวด" ข้างต้น เราสามารถใช้ช่วงกล่องและแถบเพื่อสร้างแผนภูมิพล็อตกล่องพื้นฐาน

ตัวเลือก
      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };
เนื้อหาสคริปต์แบบเต็ม
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawBoxPlot);

    function drawBoxPlot() {

      var array = [
        ['a', 100, 90, 110, 85, 96, 104, 120],
        ['b', 120, 95, 130, 90, 113, 124, 140],
        ['c', 130, 105, 140, 100, 117, 133, 139],
        ['d', 90, 85, 95, 85, 88, 92, 95],
        ['e', 70, 74, 63, 67, 69, 70, 72],
        ['f', 30, 39, 22, 21, 28, 34, 40],
        ['g', 80, 77, 83, 70, 77, 85, 90],
        ['h', 100, 90, 110, 85, 95, 102, 110]
      ];

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'x');
      data.addColumn('number', 'series0');
      data.addColumn('number', 'series1');
      data.addColumn('number', 'series2');
      data.addColumn('number', 'series3');
      data.addColumn('number', 'series4');
      data.addColumn('number', 'series5');
      data.addColumn('number', 'series6');

      data.addColumn({id:'max', type:'number', role:'interval'});
      data.addColumn({id:'min', type:'number', role:'interval'});
      data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
      data.addColumn({id:'median', type:'number', role:'interval'});
      data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});

      data.addRows(getBoxPlotValues(array));

      /**
       * Takes an array of input data and returns an
       * array of the input data with the box plot
       * interval data appended to each row.
       */
      function getBoxPlotValues(array) {

        for (var i = 0; i < array.length; i++) {

          var arr = array[i].slice(1).sort(function (a, b) {
            return a - b;
          });

          var max = arr[arr.length - 1];
          var min = arr[0];
          var median = getMedian(arr);

          // First Quartile is the median from lowest to overall median.
          var firstQuartile = getMedian(arr.slice(0, 4));

          // Third Quartile is the median from the overall median to the highest.
          var thirdQuartile = getMedian(arr.slice(3));

          array[i][8] = max;
          array[i][9] = min
          array[i][10] = firstQuartile;
          array[i][11] = median;
          array[i][12] = thirdQuartile;
        }
        return array;
      }

      /*
       * Takes an array and returns
       * the median value.
       */
      function getMedian(array) {
        var length = array.length;

        /* If the array is an even length the
         * median is the average of the two
         * middle-most values. Otherwise the
         * median is the middle-most value.
         */
        if (length % 2 === 0) {
          var midUpper = length / 2;
          var midLower = midUpper - 1;

          return (array[midUpper] + array[midLower]) / 2;
        } else {
          return array[Math.floor(length / 2)];
        }
      }

      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };

      var chart = new google.visualization.LineChart(document.getElementById('box_plot'));

      chart.draw(data, options);
    }