Ta strona została przetłumaczona przez Cloud Translation API.

Dostosowywanie punktów

Przegląd
Oto kilka prostych przykładów
Rotacja
Dostosowywanie poszczególnych punktów

Omówienie

Na wielu wykresach Google wartości danych są wyświetlane w precyzyjnych punktach. Wykres liniowy to po prostu zestaw tych punktów połączony linią, przy czym wykres punktowy to tylko punkty.

We wszystkich wykresach oprócz wykresu punktowego te punkty mają domyślnie rozmiar zero. Możesz kontrolować ich rozmiar za pomocą opcji pointSize, a ich kształt – w opcji pointShape.

Powyżej widać wykres z 6 serią, każdy z pointSize 30, ale inną wartością pointShape.

Opcje

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 7 },
          pointSize: 30,
          series: {
                0: { pointShape: 'circle' },
                1: { pointShape: 'triangle' },
                2: { pointShape: 'square' },
                3: { pointShape: 'diamond' },
                4: { pointShape: 'star' },
                5: { pointShape: 'polygon' }
            }
        };

Pełny kod 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 = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, null, null, null, null, null],
              [2, null, 3, null, null, null, null],
              [3, null, null, 4, null, null, null],
              [4, null, null, null, 5, null, null],
              [5, null, null, null, null, 6, null],
              [6, null, null, null, null, null, 7]
        ]);

        var options = {
          legend: 'none',
          pointSize: 30,
          series: {
                0: { pointShape: 'circle' },
                1: { pointShape: 'triangle' },
                2: { pointShape: 'square' },
                3: { pointShape: 'diamond' },
                4: { pointShape: 'star' },
                5: { pointShape: 'polygon' }
            }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Przykładowe przykłady

W przeciwieństwie do wykresu w poprzedniej sekcji większość wykresów zawiera tylko jeden serial. Oto przykładowy wykres liniowy z 20-punktowymi okrągłymi punktami:

Domyślny pointShape to okrąg, więc możemy pominąć te opcje:

Opcje

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 20,
      };

Pełny kod 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 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 3],
              [4, 4],
              [5, 4],
              [6, 3],
              [7, 2.5],
              [8, 3]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 20,
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Aby zmienić „krąg” na inny, ustaw pointShape na „trójkąt”, „kwadrat”, „romb”, „gwiazdkę” lub „wielokąt”:

Opcje

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#795548'],
          pointSize: 20,
          pointShape: 'square'
        };

Pełny kod 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 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 3],
              [4, 4],
              [5, 4],
              [6, 3],
              [7, 2.5],
              [8, 3]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#795548'],
          pointSize: 20,
          pointShape: 'square'
       };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Kształty „gwiazdka” i „wielokąta” umożliwiają dostosowywanie liczby boków o wartości domyślnej, która wynosi pięć. Czterostronne gwiazdki:

Opcje

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#EF851C'],
          pointSize: 30,
          pointShape: { type: 'star', sides: 4 }
        };

Pełny kod HTML

<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 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 3],
              [4, 4],
              [5, 4],
              [6, 3],
              [7, 2.5],
              [8, 3]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#EF851C'],
          pointSize: 30,
          pointShape: { type: 'star', sides: 4 }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Gwiazdki można jeszcze bardziej dostosować za pomocą opcji dent, która steruje poziomem wiarygodności gwiazdy. Gdy wcięcie zbliża się do zera, gwiazda przypomina rozgwiazdę. Gdy zbliża się ono do wgniecenia, wznosi się ono nad równobokiem.

Oto wgłębienia od 0,05 do 0,8 dla 5 stron z gwiazdami:

Opcje

var options = {
    legend: 'none',
    hAxis: { textPosition: 'none' },
    vAxis: { textPosition: 'none', gridlines: { count: 0 },
	     baselineColor: 'white' },
    colors: ['#E94D20', '#ECA403', '#63A74A',
	     '#15A0C8', '#4151A3', '#703593', '#981B48'],
    pointSize: 20,
    annotations: { stemColor: 'white', textStyle: { fontSize: 16 } },
    series: {
	0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
	1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
	2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
	3: { pointShape: { type: 'star', sides: 5 } },
	4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
	5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
	6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
    }
};

Pełny kod HTML

<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('string', 'Element');
	  data.addColumn('number', 'A');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'B');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'C');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'D');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'E');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'F');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'G');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]);
	  data.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]);
	  data.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]);
	  data.addRow(['D', , , , , , , 1, "default", , , , , , null]);
	  data.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]);
	  data.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]);
	  data.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]);

	  var options = {
              legend: 'none',
	      hAxis: { textPosition: 'none' },
              vAxis: { textPosition: 'none', gridlines: { count: 0 },
		       baselineColor: 'white' },
              colors: ['#E94D20', '#ECA403', '#63A74A',
		       '#15A0C8', '#4151A3', '#703593', '#981B48'],
              pointSize: 20,
              annotations: { stemColor: 'white', textStyle: { fontSize: 16 } },
              series: {
		  0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
		  1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
		  2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
		  3: { pointShape: { type: 'star', sides: 5 } },
		  4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
		  5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
		  6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
              }
          };

          var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
          chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Rotacja

Obracanie wszystkich kształtów punktów jest możliwe przy użyciu opcji rotation określonej w stopniach. Na przykład możemy obrócić trójkąty w dół na tym wykresie warstwowym, obracając je o 180 stopni:

Opcje

        var options = {
          legend: 'none',
          colors: ['#15A0C8'],
          pointSize: 30,
          pointShape: { type: 'triangle', rotation: 180 }
        };

Pełny kod 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 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 2],
              [4, 3],
              [5, 4.5],
              [6, 6.5],
              [7, 9],
              [8, 12]
        ]);

        var options = {
          legend: 'none',
          colors: ['#15A0C8'],
          pointSize: 30,
          pointShape: { type: 'triangle', rotation: 180 }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Dostosowywanie poszczególnych punktów

Domyślnie style zastosowane do punktu mają zastosowanie do wszystkich punktów w serii. Jeśli chcesz zmienić wygląd danego punktu danych, możesz go zmienić.

Na tym wykresie zwiększamy rozmiar jednego z punktów, zmniejszamy przezroczystość do 0, 3, a także zmieniamy kształt i kolor:

<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 = google.visualization.arrayToDataTable
            ([['X', 'Y', {'type': 'string', 'role': 'style'}],
              [1, 3, null],
              [2, 2.5, null],
              [3, 3, null],
              [4, 4, null],
              [5, 4, null],
              [6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
              [7, 2.5, null],
              [8, 3, null]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 7,
          dataOpacity: 0.3
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Dostępne są następujące dostosowania stylu:

fill-color (określony jako wartość szesnastkowa).
shape-dent
shape-rotation
shape-sides
shape-type
stroke-color (określony jako wartość szesnastkowa).
stroke-width (określony jako wartość szesnastkowa).
size
visible (czy punkt jest widoczny czy nie).

Przezroczystość można kontrolować za pomocą stylu, ale za pomocą opcji dataOpacity.