Эта страница переведена с помощью Cloud Translation API.

Настройка линий

Обзор
Изменение цвета
Изменение толщины
Пунктирные линии

Обзор

Некоторые диаграммы Google, такие как площадные, линейные и комбинированные диаграммы, содержат линии, соединяющие точки данных. Вы можете настроить цвет, толщину и пунктирность линий, используя методы, описанные на этой странице.

Изменение цвета

Вы можете изменить цвет линий, соединяющих точки данных в диаграммах Google, двумя слегка разными способами: с помощью параметра colors , чтобы изменить палитру диаграммы, или с помощью параметра series , чтобы указать цвет для конкретной серии.

На следующей диаграмме мы явно задаем цвет каждой серии.

Параметры

        var options = {
          legend: 'none',
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

Полный 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', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

        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>

Выше цвета указаны шестнадцатеричным значением (например, '#e2431e' или '#f00' для насыщенного красного), но также могут быть указаны по английскому названию. Следующий пример иллюстрирует это, а также показывает, как управлять цветами, фиксируя палитру диаграммы с помощью параметра colors , а не задавая цвета отдельных серий. Единственное отличие состоит в том, что если вы исправите палитру и в вашей палитре серий больше, чем цветов, цвета будут использоваться повторно: если ваша палитра состоит из красного и синего, половина серий будет красной, а другая половина — синей.

Параметры

        var options = {
          legend: 'none',
          colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
        };

Полный 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', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
        };

        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>

Изменение толщины

Вы можете контролировать толщину линий с помощью опции lineWidth :

Параметры

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          lineWidth: 10,
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

Полный 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', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          lineWidth: 10,
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

        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>

Чтобы контролировать ширину линии серии, используйте опцию series :

Параметры

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

Полный 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', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

        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>

Пунктирные линии

Многие стили пунктирных линий возможны с помощью параметра lineDashStyle , который принимает массив чисел. Первое число указывает длину тире, а второе — пробел после него. Если есть третье число, это длина следующего тире, а четвертое число, если оно есть, — это длина следующего пробела.

Когда диаграмма нарисована, эти длины повторяются, поэтому [4, 4] означает последовательность 4-х тире и 4-х пробелов. [5, 1, 3] означает тире длиной 5, пробел длиной 1, тире длиной 3, пробел длиной 5 и т. д. Некоторые примеры:

Параметры

        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

Полный 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', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
               'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
               'lineDashStyle: [4, 1]',
               'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
               'lineDashStyle: [14, 2, 2, 7]',
               'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
              [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
              [3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
              [4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
              [5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
              [6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              [7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
              [8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
              [9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        ]);

        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

        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>