Biểu đồ thanh Google sheet hiển thị giá trị

Biểu đồ thanh của Google được hiển thị trong trình duyệt bằng SVG hoặc VML, tùy theo trình duyệt nào phù hợp với người dùng. Giống như tất cả các biểu đồ của Google, biểu đồ thanh hiển thị chú giải công cụ khi người dùng di chuột qua dữ liệu. Đối với phiên bản dọc của biểu đồ này, hãy xem biểu đồ cột

ví dụ

thanh màu

Hãy lập biểu đồ mật độ của bốn kim loại quý

Ở trên, tất cả các màu đều là màu xanh lam mặc định. Đó là bởi vì tất cả chúng đều thuộc cùng một bộ; . Chúng ta có thể tùy chỉnh các màu này bằng

Có ba cách khác nhau để chọn màu và bảng dữ liệu của chúng tôi hiển thị tất cả. Giá trị RGB, tên màu tiếng Anh và khai báo giống như CSS

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

phong cách thanh

Cho phép bạn kiểm soát một số khía cạnh của giao diện thanh bằng các khai báo giống như CSS

• 9

•       function getValueAt(column, dataTable, row) {
          return dataTable.getFormattedValue(row, column);
        }
  

  0

•       function getValueAt(column, dataTable, row) {
          return dataTable.getFormattedValue(row, column);
        }
  

  1

•       function getValueAt(column, dataTable, row) {
          return dataTable.getFormattedValue(row, column);
        }
  

  2

•       function getValueAt(column, dataTable, row) {
          return dataTable.getFormattedValue(row, column);
        }
  

  3

•       function getValueAt(column, dataTable, row) {
          return dataTable.getFormattedValue(row, column);
        }
  

  4

•       function getValueAt(column, dataTable, row) {
          return dataTable.getFormattedValue(row, column);
        }
  

  5

Chúng tôi không khuyên bạn nên kết hợp các kiểu quá tự do bên trong biểu đồ—hãy chọn một kiểu và gắn bó với kiểu đó—nhưng để minh họa tất cả các thuộc tính kiểu, đây là một ví dụ mẫu

Hai thanh đầu tiên, mỗi thanh sử dụng một

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

thanh ghi nhãn

Biểu đồ có một số loại nhãn, chẳng hạn như nhãn đánh dấu, nhãn chú giải và nhãn trong chú giải công cụ. Trong phần này, chúng ta sẽ xem cách đặt nhãn bên trong (hoặc gần) các thanh trong biểu đồ thanh

Giả sử chúng ta muốn chú thích từng thanh bằng ký hiệu hóa học thích hợp. Chúng ta có thể làm điều đó với vai trò chú thích

Trong bảng dữ liệu của chúng tôi, chúng tôi xác định một cột mới với

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Mặc dù người dùng có thể di chuột qua các thanh để xem các giá trị dữ liệu, nhưng bạn có thể muốn đưa chúng vào chính các thanh đó

Điều này phức tạp hơn một chút so với mức bình thường, bởi vì chúng tôi tạo một

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Nếu chúng ta muốn định dạng giá trị theo cách khác, chúng ta có thể xác định a và gói nó trong một hàm như thế này

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Sau đó, chúng ta có thể gọi nó bằng

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Nếu nhãn quá lớn để vừa hoàn toàn bên trong thanh, nhãn sẽ hiển thị bên ngoài

Biểu đồ thanh xếp chồng lên nhau

Biểu đồ thanh xếp chồng là biểu đồ thanh đặt các giá trị có liên quan lên nhau. Nếu có bất kỳ giá trị âm nào, chúng sẽ được xếp chồng lên nhau theo thứ tự ngược lại bên dưới đường cơ sở trục của biểu đồ. Biểu đồ thanh xếp chồng lên nhau thường được sử dụng khi một danh mục được chia thành các thành phần một cách tự nhiên. Chẳng hạn, hãy xem xét một số doanh số bán sách giả định, được chia theo thể loại và so sánh theo thời gian

Bạn tạo biểu đồ thanh xếp chồng lên nhau bằng cách đặt tùy chọn

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Biểu đồ thanh xếp chồng cũng hỗ trợ xếp chồng 100%, trong đó các ngăn xếp phần tử ở mỗi giá trị miền được thay đổi tỷ lệ sao cho chúng cộng lại tới 100%. Các tùy chọn cho điều này là

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

Lưu ý trong biểu đồ xếp chồng 100% ở bên phải, các giá trị đánh dấu dựa trên tỷ lệ 0-1 tương đối dưới dạng phân số của 1, nhưng các giá trị trục được hiển thị dưới dạng phần trăm. Điều này là do dấu kiểm trục phần trăm là kết quả của việc áp dụng định dạng "#. ##%" thành các giá trị tỷ lệ 0-1 tương đối. Khi sử dụng

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Tạo biểu đồ thanh Vật liệu

Vào năm 2014, Google đã công bố các nguyên tắc nhằm hỗ trợ giao diện chung trên các thuộc tính và ứng dụng của mình (chẳng hạn như ứng dụng Android) chạy trên các nền tảng của Google. Chúng tôi gọi nỗ lực này là Thiết kế Vật liệu. Chúng tôi sẽ cung cấp các phiên bản "Vật liệu" của tất cả các biểu đồ cốt lõi của chúng tôi;

Tạo Biểu đồ thanh Vật liệu tương tự như tạo cái mà bây giờ chúng ta gọi là Biểu đồ thanh "Cổ điển". Bạn tải Google Visualization API (mặc dù với gói

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

Ghi chú. Biểu đồ Vật liệu sẽ không hoạt động trong các phiên bản cũ của Internet Explorer. (IE8 và các phiên bản cũ hơn không hỗ trợ SVG, mà Biểu đồ Vật liệu yêu cầu. )

Biểu đồ thanh Vật liệu có nhiều cải tiến nhỏ so với Biểu đồ thanh cổ điển, bao gồm bảng màu được cải thiện, các góc được làm tròn, định dạng nhãn rõ ràng hơn, khoảng cách mặc định chặt chẽ hơn giữa các chuỗi, đường lưới và tiêu đề mềm hơn (và bổ sung phụ đề)

The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue

Also, the way options are declared is not finalized, so if you are using any of the classic options, you must convert them to material options by replacing this line

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

Using

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Dual-X charts

Note. Dual-X axes are available only for Material charts (i. e. , those with package

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Sometimes you'll want to display two series in a bar chart, with two independent x-axes. a top axis for one series, and a bottom axis for another

Note that not only are our two x-axes labeled differently ("parsecs" versus "apparent magnitude") but they each have their own independent scales and gridlines. If you want to customize this behavior, use the

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

In the code below, the

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Biểu đồ Top-X

Note. Top-X axes are available only for Material charts (i. e. , those with package

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

If you want to put the X-axis labels and title on the top of your chart rather than the bottom, you can do that in Material charts with the

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Loading

The

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

For Material Bar Charts, the

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Data format

hàng. Each row in the table represents a group of bars

Columns

• Y-axis group labels ()
• Y-axis values ()

• string ()
• number, date, datetime or
  timeofday ()

Configuration options

The duration of the animation, in milliseconds. For details, see the animation documentation

Type. number

Default. 0

The easing function applied to the animation. The following options are available

• 'linear' - Constant speed
• 'in' - Ease in - Start slow and speed up
• 'out' - Ease out - Start fast and slow down
• 'inAndOut' - Ease in and out - Start slow, speed up, then slow down

Type. string

Default. 'linear'

Determines if the chart will animate on the initial draw. If

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Type. boolean

Mặc định sai

Trong biểu đồ Thanh và Cột, nếu được đặt thành

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Type. boolean

Mặc định. SAI

Đối với các biểu đồ hỗ trợ chú thích, đối tượng

Kiểu. sự vật

Mặc định. màu là "đen";

Đối với các biểu đồ hỗ trợ chú thích, đối tượng

Kiểu. sự vật

Mặc định. màu là "đen";

Đối với các biểu đồ hỗ trợ chú thích, đối tượng

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Tùy chọn này hiện được hỗ trợ cho các biểu đồ vùng, thanh, cột, tổ hợp, đường và phân tán. Nó không được hỗ trợ bởi Annotation Chart

Kiểu. sự vật

Mặc định. vô giá trị

Đối với các biểu đồ hỗ trợ chú thích, boolean

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. boolean

Mặc định. ĐÚNG VẬY

Đối với các biểu đồ hỗ trợ chú thích, đối tượng

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định. màu là "đen";

Đối với các biểu đồ hỗ trợ chú thích, tùy chọn

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. string

Default. 'point'

For charts that support annotations, the

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

This option is currently supported for area, bar, column, combo, line, and scatter charts. It is not supported by the Annotation Chart

Kiểu. sự vật

Mặc định. vô giá trị

Where to place the axis titles, compared to the chart area. Supported values

• in - Draw the axis titles inside the chart area
• out - Draw the axis titles outside the chart area
• none - Omit the axis titles

Type. string

Default. 'out'

The background color for the main area of the chart. Can be either a simple HTML color string, for example.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. string or object

Default. 'white'

The color of the chart border, as an HTML color string

Type. string

Default. '#666'

The border width, in pixels

Type. number

Default. 0

The chart fill color, as an HTML color string

Type. string

Default. 'white'

The width of a group of bars, specified in either of these formats

• Pixels (e. g. 50)
• Percentage of the available width for each group (e. g. '20%'), where '100%' means that groups have no space between them

Type. number or string

Default. Tỷ lệ vàng, xấp xỉ '61. 8%'

Whether the bars in a are vertical or horizontal. This option has no effect on Classic Bar Charts or Classic Column Charts

Type. 'horizontal' or 'vertical'

Default. 'vertical'

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported. a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định. vô giá trị

Chart area background color. When a string is used, it can be either a hex string (e. g. , '#fdc') or an English color name. When an object is used, the following properties can be provided

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  17. the color, provided as a hex string or English color name

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  18. if provided, draws a border around the chart area of the given width (and with the color of

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  17)

Type. string or object

Default. 'white'

How far to draw the chart from the left border

Type. number or string

Default. auto

Cách vẽ biểu đồ từ đường viền trên cùng bao xa

Type. number or string

Default. auto

Chiều rộng khu vực biểu đồ

Type. number or string

Default. auto

Chiều cao khu vực biểu đồ

Type. number or string

Default. auto

Đối với , tùy chọn này chỉ định phụ đề. Chỉ Biểu đồ vật liệu hỗ trợ phụ đề

Type. string

Mặc định. vô giá trị

Đối với , tùy chọn này chỉ định tiêu đề

Type. string

Mặc định. vô giá trị

Các màu được sử dụng cho các thành phần biểu đồ. Ví dụ: một mảng các chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. Mảng chuỗi

Mặc định. màu mặc định

Độ trong suốt của các điểm dữ liệu, với 1. 0 hoàn toàn mờ đục và 0. 0 hoàn toàn minh bạch. Trong biểu đồ phân tán, biểu đồ, thanh và cột, điều này đề cập đến dữ liệu hiển thị. dấu chấm trong biểu đồ phân tán và hình chữ nhật trong các biểu đồ khác. Trong các biểu đồ mà việc chọn dữ liệu sẽ tạo ra một dấu chấm, chẳng hạn như biểu đồ đường và vùng, điều này đề cập đến các vòng tròn xuất hiện khi di chuột hoặc lựa chọn. Biểu đồ kết hợp thể hiện cả hai hành vi và tùy chọn này không ảnh hưởng đến các biểu đồ khác. (Để thay đổi độ mờ của đường xu hướng, hãy xem. )

Type. number

Mặc định. 1. 0

Whether the chart throws user-based events or reacts to user interaction. Nếu sai, biểu đồ sẽ không đưa ra 'chọn' hoặc các sự kiện dựa trên tương tác khác (nhưng sẽ đưa ra các sự kiện sẵn sàng hoặc lỗi) và sẽ không hiển thị văn bản di chuột hoặc thay đổi khác tùy thuộc vào đầu vào của người dùng

Type. boolean

Mặc định. ĐÚNG VẬY

Tùy chọn

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Tính năng này là thử nghiệm và có thể thay đổi trong các bản phát hành trong tương lai

Ghi chú. Explorer chỉ hoạt động với các trục liên tục (chẳng hạn như số hoặc ngày tháng)

Kiểu. sự vật

Mặc định. vô giá trị

Trình khám phá Google Charts hỗ trợ ba hành động

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  23. Kéo để xoay quanh biểu đồ theo chiều ngang và chiều dọc. Để chỉ xoay dọc theo trục ngang, hãy sử dụng

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  24. Tương tự cho trục tung

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  25. Hành vi mặc định của trình khám phá là phóng to và thu nhỏ khi người dùng cuộn. Nếu sử dụng

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  26, kéo qua một khu vực hình chữ nhật sẽ phóng to khu vực đó. Chúng tôi khuyên bạn nên sử dụng

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  27 bất cứ khi nào sử dụng

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  25. See

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  29,

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  30, and

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  31 for zoom customizations

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  27. Nhấp chuột phải vào biểu đồ sẽ đưa biểu đồ về mức thu phóng và thu phóng ban đầu

Kiểu. Mảng chuỗi

Mặc định. ['dragToPan', 'rightClickToReset']

Theo mặc định, người dùng có thể xoay theo cả chiều ngang và chiều dọc khi sử dụng tùy chọn

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. string

Mặc định. cả xoay ngang và dọc

By default, users can pan all around, regardless of where the data is. Để đảm bảo rằng người dùng không di chuyển ra ngoài biểu đồ gốc, hãy sử dụng

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. boolean

Mặc định. SAI

Mức tối đa mà nhà thám hiểm có thể phóng to. Theo mặc định, người dùng sẽ có thể phóng to đủ để họ chỉ thấy 25% chế độ xem ban đầu. Setting

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Mặc định. 0. 25

Mức tối đa mà nhà thám hiểm có thể thu nhỏ. Theo mặc định, người dùng sẽ có thể thu nhỏ đủ xa để biểu đồ chỉ chiếm 1/4 dung lượng có sẵn. Cài đặt

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Mặc định. 4

When users zoom in or out,

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Mặc định. 1. 5

Loại thực thể nhận tiêu điểm khi di chuột. Cũng ảnh hưởng đến thực thể nào được chọn bằng cách nhấp chuột và phần tử bảng dữ liệu nào được liên kết với các sự kiện. Can be one of the following

• 'datum' - Focus on a single data point. Correlates to a cell in the data table
• 'category' - Focus on a grouping of all data points along the major axis. Correlates to a row in the data table

In focusTarget 'category' the tooltip displays all the category values. This may be useful for comparing values of different series

Type. string

Default. 'datum'

The default font size, in pixels, of all text in the chart. You can override this using properties for specific chart elements

Type. number

Default. automatic

The default font face for all text in the chart. You can override this using properties for specific chart elements

Type. string

Default. 'Arial'

Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames. )

Type. boolean

Mặc định. SAI

Specifies properties for individual horizontal axes, if the chart has multiple horizontal axes. Each child object is a

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

To specify a chart with multiple horizontal axes, first define a new axis using

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

This property can be either an object or an array. the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. Array of object, or object with child objects

Mặc định. vô giá trị

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định. vô giá trị

The baseline for the horizontal axis

Type. number

Default. automatic

The color of the baseline for the horizontal axis. Can be any HTML color string, for example.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. 'black'

The direction in which the values along the horizontal axis grow. Specify

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. 1 or -1

Default. 1

A format string for numeric axis labels. This is a subset of the . For instance,

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  50. displays numbers with no formatting (e. g. , 8000000)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  51. displays numbers with thousands separators (e. g. , 8,000,000)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  52. displays numbers in scientific notation (e. g. , 8e6)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  53. displays numbers in the local currency (e. g. , $8,000,000. 00)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  54. displays numbers as percentages (e. g. , 800,000,000%)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  55. hiển thị số viết tắt (e. g. , 8M)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  56. displays numbers as full words (e. g. , 8.000.000)

The actual formatting applied to the label is derived from the locale the API has been loaded with. Để biết thêm chi tiết, xem

Khi tính toán các giá trị đánh dấu và đường lưới, một số kết hợp thay thế của tất cả các tùy chọn đường lưới có liên quan sẽ được xem xét và các phương án thay thế sẽ bị từ chối nếu các nhãn đánh dấu được định dạng sẽ bị trùng lặp hoặc chồng lên nhau. So you can specify

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. string

Default. auto

Một đối tượng có thuộc tính để định cấu hình đường lưới trên trục ngang. Lưu ý rằng các đường lưới trục ngang được vẽ theo chiều dọc. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu chữ đối tượng, như được hiển thị ở đây

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định. vô giá trị

Màu của các đường lưới ngang bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ

Type. string

Mặc định. '#CCC'

Số gần đúng của đường lưới ngang bên trong khu vực biểu đồ. Nếu bạn chỉ định một số dương cho

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. -1

Ghi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đường lưới được tính toán trong biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây

Định dạng chung là

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Thông tin bổ sung có thể được tìm thấy trong

Kiểu. sự vật

Mặc định. vô giá trị

Một đối tượng có các thành viên để định cấu hình các đường lưới phụ trên trục ngang, tương tự như hAxis. tùy chọn đường lưới

Kiểu. sự vật

Mặc định. vô giá trị

Màu của các đường lưới phụ nằm ngang bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ

Type. string

Mặc định. Sự pha trộn giữa đường lưới và màu nền

Tùy chọn

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Mặc định. 1

Ghi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đường lưới phụ được tính toán trong biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây

Định dạng chung là

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Thông tin bổ sung có thể được tìm thấy trong

Kiểu. sự vật

Mặc định. vô giá trị

Thuộc tính

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. boolean

Mặc định. SAI

Thuộc tính

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

• null - Không thực hiện chia tỷ lệ logarit
• 'log' - Thang logarit. Các giá trị âm và 0 không được vẽ. Tùy chọn này giống như cài đặt

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  67
• 'mirrorLog' - Chia tỷ lệ logarit trong đó các giá trị âm và 0 được vẽ. Giá trị biểu thị của một số âm là giá trị âm của nhật ký giá trị tuyệt đối. Các giá trị gần bằng 0 được vẽ trên thang tuyến tính

Type. string

Mặc định. vô giá trị

Một đối tượng chỉ định kiểu văn bản trục ngang. Đối tượng có định dạng này

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Vị trí của văn bản trục ngang, so với khu vực biểu đồ. Supported values. 'ra', 'vào', 'không'

Type. string

Default. 'out'

Thay thế các dấu kiểm trục X được tạo tự động bằng mảng đã chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu hợp lệ (chẳng hạn như số, ngày, ngày giờ hoặc timeofday) hoặc một đối tượng. Nếu đó là một đối tượng, nó phải có thuộc tính

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

ViewWindow sẽ được tự động mở rộng để bao gồm các dấu tick tối thiểu và tối đa trừ khi bạn chỉ định một

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

ví dụ

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  78

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  79

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  80

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  81

Kiểu. Mảng phần tử

Default. auto

Thuộc tính

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. string

Mặc định. vô giá trị

Một đối tượng chỉ định kiểu văn bản tiêu đề trục ngang. Đối tượng có định dạng này

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Di chuyển giá trị lớn nhất của trục hoành đến giá trị đã chỉ định; . Bỏ qua nếu giá trị này được đặt thành giá trị nhỏ hơn giá trị x tối đa của dữ liệu.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. automatic

Di chuyển giá trị tối thiểu của trục hoành đến giá trị đã chỉ định; . Bỏ qua nếu giá trị này được đặt thành giá trị lớn hơn giá trị x tối thiểu của dữ liệu.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. automatic

Chỉ định cách chia tỷ lệ trục ngang để hiển thị các giá trị trong khu vực biểu đồ. Các giá trị chuỗi sau được hỗ trợ

• 'khá' - Chia tỷ lệ các giá trị theo chiều ngang sao cho các giá trị dữ liệu tối đa và tối thiểu được hiển thị một chút bên trong bên trái và bên phải của khu vực biểu đồ. Chế độ xemWindow được mở rộng thành đường lưới chính gần nhất cho các số hoặc đường lưới phụ gần nhất cho ngày và giờ
• 'tối đa hóa' - Chia tỷ lệ các giá trị theo chiều ngang sao cho các giá trị dữ liệu tối đa và tối thiểu chạm vào bên trái và bên phải của khu vực biểu đồ. Điều này sẽ khiến

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  91 và

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  92 bị bỏ qua
• 'rõ ràng' - Một tùy chọn không dùng nữa để chỉ định các giá trị tỷ lệ trái và phải của khu vực biểu đồ. (Không dùng nữa vì nó dư thừa với

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  91 và

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  92. ) Các giá trị dữ liệu bên ngoài các giá trị này sẽ bị cắt. Bạn phải chỉ định một đối tượng

     function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  95 mô tả các giá trị tối đa và tối thiểu để hiển thị

Type. string

Mặc định. Tương đương với 'pretty', nhưng

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Chỉ định phạm vi cắt xén của trục ngang

Kiểu. sự vật

Mặc định. vô giá trị

Giá trị dữ liệu ngang tối đa để hiển thị

Bị bỏ qua khi

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. auto

Giá trị dữ liệu ngang tối thiểu để hiển thị

Bị bỏ qua khi

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. auto

Chiều cao của biểu đồ, tính bằng pixel

Type. number

Mặc định. chiều cao của phần tử chứa

Nếu được đặt thành true, hãy sắp xếp các phần tử cho tất cả các chuỗi ở mỗi giá trị miền. Ghi chú. Trong các biểu đồ Cột, Vùng và SteppedArea, Google Charts đảo ngược thứ tự của các mục chú thích để tương ứng tốt hơn với việc sắp xếp các phần tử chuỗi (E. g. sê-ri 0 sẽ là vật phẩm huyền thoại dưới cùng). Điều này không áp dụng cho Biểu đồ thanh

Tùy chọn

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Các tùy chọn cho

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  02 — các phần tử sẽ không xếp chồng lên nhau. Đây là tùy chọn mặc định

•       var data = google.visualization.arrayToDataTable([
          ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
           'Western', 'Literature', { role: 'annotation' } ],
          ['2010', 10, 24, 20, 32, 18, 5, ''],
          ['2020', 16, 22, 23, 30, 16, 9, ''],
          ['2030', 28, 19, 29, 30, 12, 13, '']
        ]);
  
        var options = {
          width: 600,
          height: 400,
          legend: { position: 'top', maxLines: 3 },
          bar: { groupWidth: '75%' },
          isStacked: true
        };
  

  8 — ngăn xếp các phần tử cho tất cả các chuỗi ở mỗi giá trị miền

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  04 — xếp chồng các phần tử cho tất cả các chuỗi ở mỗi giá trị miền và thay đổi tỷ lệ của chúng sao cho chúng cộng lại thành 100%, với giá trị của mỗi phần tử được tính theo tỷ lệ phần trăm là 100%

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  05 — xếp chồng các phần tử cho tất cả các chuỗi ở mỗi giá trị miền và thay đổi tỷ lệ của chúng sao cho chúng cộng lại thành 1, với giá trị của mỗi phần tử được tính bằng một phân số của 1

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  06 — chức năng giống như

          var options_stacked = {
            isStacked: true,
            height: 300,
            legend: {position: 'top', maxLines: 3},
            hAxis: {minValue: 0}
          };
      

  2

Đối với xếp chồng 100%, giá trị được tính toán cho từng phần tử sẽ xuất hiện trong chú giải công cụ sau giá trị thực của nó

Trục mục tiêu sẽ mặc định đánh dấu các giá trị dựa trên tỷ lệ 0-1 tương đối dưới dạng phân số của 1 cho

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Xếp chồng 100% chỉ hỗ trợ các giá trị dữ liệu thuộc loại

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Kiểu. boolean/chuỗi

Mặc định. SAI

Một đối tượng có các thành viên để định cấu hình các khía cạnh khác nhau của chú giải. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu chữ đối tượng, như được hiển thị ở đây

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Kiểu. sự vật

Mặc định. vô giá trị

Chỉ mục trang dựa trên số 0 được chọn ban đầu của chú giải

Type. number

Default. 0

Vị trí của huyền thoại. Có thể là một trong những điều sau đây

• 'bottom' - Bên dưới biểu đồ
• 'left' - Ở bên trái của biểu đồ, miễn là trục bên trái không có chuỗi liên kết với nó. Vì vậy, nếu bạn muốn chú thích ở bên trái, hãy sử dụng tùy chọn

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  14
• 'in' - Bên trong biểu đồ, ở góc trên cùng bên trái
• 'none' - Không có chú giải nào được hiển thị
• 'right' - Ở bên phải của biểu đồ. Không tương thích với tùy chọn

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  15
• 'top' - Phía trên biểu đồ

Type. string

Mặc định. 'Phải'

Căn chỉnh của huyền thoại. Có thể là một trong những điều sau đây

• 'bắt đầu' - Căn với điểm bắt đầu của khu vực được phân bổ cho chú giải
• 'trung tâm' - Căn giữa trong khu vực được phân bổ cho chú giải
• 'kết thúc' - Căn chỉnh đến cuối khu vực được phân bổ cho chú giải

Bắt đầu, ở giữa và kết thúc có liên quan đến kiểu -- dọc hoặc ngang -- của chú giải. Ví dụ: trong chú thích 'đúng', 'bắt đầu' và 'kết thúc' lần lượt ở trên cùng và dưới cùng;

Giá trị mặc định phụ thuộc vào vị trí của chú giải. Đối với chú thích 'dưới cùng', mặc định là 'ở giữa';

Type. string

Default. automatic

Một đối tượng chỉ định kiểu văn bản chú giải. Đối tượng có định dạng này

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Nếu đặt thành true, sẽ vẽ chuỗi từ dưới lên trên. Mặc định là vẽ từ trên xuống dưới

Type. boolean

Mặc định. SAI

Định hướng của biểu đồ. Khi được đặt thành

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. string

Mặc định. 'nằm ngang'

Một mảng các đối tượng, mỗi đối tượng mô tả định dạng của chuỗi tương ứng trong biểu đồ. Để sử dụng các giá trị mặc định cho một chuỗi, hãy chỉ định một đối tượng trống {}. Nếu một chuỗi hoặc một giá trị không được chỉ định, giá trị chung sẽ được sử dụng. Mỗi đối tượng hỗ trợ các thuộc tính sau

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  23 - Một đối tượng được áp dụng cho các chú thích cho chuỗi này. Điều này có thể được sử dụng để kiểm soát, ví dụ,

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  24 cho chuỗi

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  6

  Xem các tùy chọn

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  23 khác nhau để có danh sách đầy đủ hơn về những gì có thể được tùy chỉnh

• 9 - Màu sử dụng cho loạt bài này. Chỉ định một chuỗi màu HTML hợp lệ

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  27 - ​​Mô tả về sê-ri xuất hiện trong chú thích bảng xếp hạng

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  28 - Gán chuỗi này vào trục nào, trong đó 0 là trục mặc định và 1 là trục đối diện. Giá trị mặc định là 0; . Ít nhất một chuỗi được phân bổ cho trục mặc định. Bạn có thể xác định tỷ lệ khác nhau cho các trục khác nhau

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  29 - Một giá trị boolean, trong đó đúng có nghĩa là bộ truyện phải có mục chú thích và sai có nghĩa là không nên. Mặc định là đúng

Bạn có thể chỉ định một mảng các đối tượng, mỗi mảng áp dụng cho chuỗi theo thứ tự nhất định hoặc bạn có thể chỉ định một đối tượng trong đó mỗi phần tử con có một phím số cho biết nó áp dụng cho chuỗi nào. Ví dụ: hai tuyên bố sau giống hệt nhau và tuyên bố chuỗi đầu tiên là màu đen và không có trong chú giải, và chuỗi thứ tư là màu đỏ và không có trong chú giải

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Kiểu. Mảng đối tượng hoặc đối tượng với các đối tượng lồng nhau

Mặc định. {}

Chủ đề là một tập hợp các giá trị tùy chọn được xác định trước hoạt động cùng nhau để đạt được một hành vi biểu đồ hoặc hiệu ứng hình ảnh cụ thể. Hiện tại chỉ có một chủ đề có sẵn

• 'tối đa hóa' - Tối đa hóa diện tích của biểu đồ và vẽ chú giải cũng như tất cả các nhãn bên trong khu vực biểu đồ. Đặt các tùy chọn sau.

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  8

Type. string

Mặc định. vô giá trị

Văn bản để hiển thị phía trên biểu đồ

Type. string

Mặc định. Không tiêu đề

Vị trí đặt tiêu đề biểu đồ, so với diện tích biểu đồ. Giá trị được hỗ trợ

• in - Vẽ tiêu đề bên trong khu vực biểu đồ
• out - Vẽ tiêu đề bên ngoài khu vực biểu đồ
• không có - Bỏ qua tiêu đề

Type. string

Default. 'out'

Một đối tượng chỉ định kiểu văn bản tiêu đề. Đối tượng có định dạng này

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Một đối tượng có các thành viên để định cấu hình các thành phần chú giải công cụ khác nhau. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu chữ đối tượng, như được hiển thị ở đây

Kiểu. sự vật

Mặc định. vô giá trị

Nếu được đặt thành

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Ghi chú. Điều này chỉ áp dụng cho chú giải công cụ HTML. Nếu tính năng này được bật với chú giải công cụ SVG, mọi phần tràn ra ngoài giới hạn của biểu đồ sẽ bị cắt. Xem Tùy chỉnh nội dung chú giải công cụ để biết thêm chi tiết

Type. boolean

Mặc định. SAI

Nếu được đặt thành true, hãy sử dụng chú giải công cụ được hiển thị bằng HTML (chứ không phải được hiển thị bằng SVG). Xem Tùy chỉnh nội dung chú giải công cụ để biết thêm chi tiết

Ghi chú. tùy chỉnh nội dung chú giải công cụ HTML qua không được hỗ trợ bởi trực quan hóa Biểu đồ bong bóng

Type. boolean

Mặc định. SAI

Nếu đúng, hãy hiển thị các ô vuông có màu bên cạnh thông tin sê-ri trong chú giải công cụ. Giá trị mặc định là đúng khi

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. boolean

Default. automatic

Một đối tượng chỉ định kiểu văn bản chú giải công cụ. Đối tượng có định dạng này

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Tương tác của người dùng khiến chú giải công cụ được hiển thị

• 'tiêu điểm' - Chú giải công cụ sẽ được hiển thị khi người dùng di chuột qua phần tử
• 'none' - Chú giải công cụ sẽ không được hiển thị
• 'selection' - Chú giải công cụ sẽ được hiển thị khi người dùng chọn phần tử

Type. string

Mặc định. 'tập trung'

Hiển thị các đường xu hướng trên các biểu đồ hỗ trợ chúng. Theo mặc định, các đường xu hướng tuyến tính được sử dụng, nhưng điều này có thể được tùy chỉnh bằng tùy chọn

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Đường xu hướng được chỉ định trên cơ sở từng chuỗi, do đó, hầu hết thời gian các tùy chọn của bạn sẽ giống như thế này

Kiểu. sự vật

Mặc định. vô giá trị

Màu của đường xu hướng , được thể hiện dưới dạng tên màu tiếng Anh hoặc chuỗi hex

Type. string

Mặc định. màu sê-ri mặc định

Đối với các đường xu hướng của

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. number

Mặc định. 3

Nếu được đặt, đường xu hướng sẽ xuất hiện trong chú giải dưới dạng chuỗi này

Type. string

Mặc định. vô giá trị

Độ rộng đường của đường xu hướng, tính bằng pixel

Type. number

Mặc định. 2

Độ trong suốt của đường xu hướng , từ 0. 0 (trong suốt) đến 1. 0 (đục)

Type. number

Mặc định. 1. 0

Đường xu hướng được xây dựng bằng cách đóng dấu một loạt các dấu chấm trên biểu đồ; . Tùy chọn

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. number

Default. 1

Đường xu hướng được xây dựng bằng cách đóng dấu một loạt các dấu chấm trên biểu đồ. Tùy chọn

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. boolean

Mặc định. ĐÚNG VẬY

Có hiển thị chú giải công cụ trong chú giải hoặc đường xu hướng hay không

Type. boolean

Mặc định. SAI

Cho dù các đường xu hướng là

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. string

Mặc định. tuyến tính

Phương trình đường xu hướng có xuất hiện trong truyền thuyết hay không. (Nó sẽ xuất hiện trong tooltip đường xu hướng. )

Type. boolean

Mặc định. SAI

Một đối tượng có các thành viên để định cấu hình các phần tử trục dọc khác nhau. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu chữ đối tượng, như được hiển thị ở đây

Kiểu. sự vật

Mặc định. vô giá trị

Thuộc tính

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. number

Default. automatic

Chỉ định màu của đường cơ sở cho trục tung. Có thể là bất kỳ chuỗi màu HTML nào, ví dụ.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. number

Default. 'black'

Hướng mà các giá trị dọc theo trục tung tăng lên. Theo mặc định, giá trị thấp nằm ở dưới cùng của biểu đồ. Chỉ định

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. 1 or -1

Default. 1

Chuỗi định dạng cho nhãn trục số hoặc ngày

Đối với nhãn trục số, đây là tập hợp con của định dạng thập phân. Chẳng hạn,

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  50. displays numbers with no formatting (e. g. , 8000000)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  51. displays numbers with thousands separators (e. g. , 8,000,000)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  52. displays numbers in scientific notation (e. g. , 8e6)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  53. displays numbers in the local currency (e. g. , $8,000,000. 00)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  54. displays numbers as percentages (e. g. , 800,000,000%)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  55. hiển thị số viết tắt (e. g. , 8M)

•    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitations', { role: 'style' } ],
          ['2010', 10, 'color: gray'],
          ['2020', 14, 'color: #76A7FA'],
          ['2030', 16, 'opacity: 0.2'],
          ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
          ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
        ]);
  

  56. displays numbers as full words (e. g. , 8.000.000)

Đối với nhãn trục ngày, đây là tập hợp con của định dạng ngày. Chẳng hạn,

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

The actual formatting applied to the label is derived from the locale the API has been loaded with. Để biết thêm chi tiết, xem

Khi tính toán các giá trị đánh dấu và đường lưới, một số kết hợp thay thế của tất cả các tùy chọn đường lưới có liên quan sẽ được xem xét và các phương án thay thế sẽ bị từ chối nếu các nhãn đánh dấu được định dạng sẽ bị trùng lặp hoặc chồng lên nhau. So you can specify

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. string

Default. auto

Một đối tượng có các thành viên để định cấu hình đường lưới trên trục tung. Lưu ý rằng các đường lưới trục dọc được vẽ theo chiều ngang. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu chữ đối tượng, như được hiển thị ở đây

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Tùy chọn này chỉ được hỗ trợ cho một trục

Kiểu. sự vật

Mặc định. vô giá trị

Màu của các đường lưới dọc bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ

Type. string

Mặc định. '#CCC'

Số gần đúng của đường lưới ngang bên trong khu vực biểu đồ. Nếu bạn chỉ định một số dương cho

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Type. number

Default. -1

Ghi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đường lưới được tính toán trong biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây

Định dạng chung là

Thông tin bổ sung có thể được tìm thấy trong

Kiểu. sự vật

Mặc định. vô giá trị

Một đối tượng có các thành viên để định cấu hình các đường lưới phụ trên trục dọc, tương tự như vAxis. tùy chọn đường lưới

Tùy chọn này chỉ được hỗ trợ cho một trục

Kiểu. sự vật

Mặc định. vô giá trị

Màu của các đường lưới phụ dọc bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ

Type. string

Mặc định. Sự pha trộn giữa đường lưới và màu nền

Các đường lưới nhỏ. tùy chọn đếm phần lớn không được dùng nữa, ngoại trừ việc tắt các đường lưới nhỏ bằng cách đặt số đếm thành 0. Số lượng đường lưới phụ phụ thuộc vào khoảng cách giữa các đường lưới chính (xem vAxis. đường lưới. khoảng thời gian) và không gian yêu cầu tối thiểu (xem vAxis. đường lưới nhỏ. khoảng cách tối thiểu)

Type. number

Default. 1

Ghi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đường lưới phụ được tính toán trong biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây

Định dạng chung là

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Thông tin bổ sung có thể được tìm thấy trong

Kiểu. sự vật

Mặc định. vô giá trị

Nếu đúng, làm cho trục tung thành thang logarit. Ghi chú. Tất cả các giá trị phải là số dương

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. boolean

Mặc định. SAI

Thuộc tính

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

• null - Không thực hiện chia tỷ lệ logarit
• 'log' - Thang logarit. Các giá trị âm và 0 không được vẽ. Tùy chọn này giống như cài đặt

         var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  79
• 'mirrorLog' - Chia tỷ lệ logarit trong đó các giá trị âm và 0 được vẽ. Giá trị biểu thị của một số âm là giá trị âm của nhật ký giá trị tuyệt đối. Các giá trị gần bằng 0 được vẽ trên thang tuyến tính

Type. string

Mặc định. vô giá trị

Vị trí của văn bản trục tung, so với khu vực biểu đồ. Giá trị được hỗ trợ. 'ra', 'vào', 'không'

Type. string

Default. 'out'

Một đối tượng chỉ định kiểu văn bản trục dọc. Đối tượng có định dạng này

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Thay thế các tick trục Y được tạo tự động bằng mảng đã chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu hợp lệ (chẳng hạn như số, ngày, ngày giờ hoặc timeofday) hoặc một đối tượng. Nếu đó là một đối tượng, nó phải có thuộc tính

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

ViewWindow sẽ được tự động mở rộng để bao gồm các dấu tick tối thiểu và tối đa trừ khi bạn chỉ định một

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

ví dụ

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  90

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  91

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  92

•        var data = google.visualization.arrayToDataTable([
           ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
           ['Copper', 8.94, '#b87333', 'Cu' ],
           ['Silver', 10.49, 'silver', 'Ag' ],
           ['Gold', 19.30, 'gold', 'Au' ],
           ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
        ]);
  

  93

Tùy chọn này chỉ được hỗ trợ cho một trục

Kiểu. Mảng phần tử

Default. auto

Thuộc tính

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Type. string

Mặc định. Không tiêu đề

Một đối tượng chỉ định kiểu văn bản tiêu đề trục dọc. Đối tượng có định dạng này

Ví dụ:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kiểu. sự vật

Mặc định.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Di chuyển giá trị lớn nhất của trục tung đến giá trị đã chỉ định; . Bị bỏ qua nếu giá trị này được đặt thành giá trị nhỏ hơn giá trị y tối đa của dữ liệu.

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. number

Default. automatic

Di chuyển giá trị tối thiểu của trục tung đến giá trị đã chỉ định; . Bị bỏ qua nếu giá trị này được đặt thành giá trị lớn hơn giá trị y tối thiểu của dữ liệu.

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. number

Mặc định. vô giá trị

Chỉ định cách chia tỷ lệ trục dọc để hiển thị các giá trị trong khu vực biểu đồ. Các giá trị chuỗi sau được hỗ trợ

• 'khá' - Chia tỷ lệ các giá trị theo chiều dọc sao cho các giá trị dữ liệu tối đa và tối thiểu được hiển thị một chút bên trong phần dưới cùng và trên cùng của khu vực biểu đồ. Chế độ xemWindow được mở rộng thành đường lưới chính gần nhất cho các số hoặc đường lưới phụ gần nhất cho ngày và giờ
• 'tối đa hóa' - Chia tỷ lệ các giá trị theo chiều dọc sao cho các giá trị dữ liệu tối đa và tối thiểu chạm vào đầu và cuối của khu vực biểu đồ. Điều này sẽ khiến
  06 và
  07 bị bỏ qua
• 'rõ ràng' - Một tùy chọn không dùng nữa để chỉ định các giá trị tỷ lệ trên cùng và dưới cùng của khu vực biểu đồ. (Không dùng nữa vì nó dư thừa với
  06 và
  07. Các giá trị dữ liệu bên ngoài các giá trị này sẽ bị cắt. Bạn phải chỉ định một đối tượng
  10 mô tả các giá trị tối đa và tối thiểu để hiển thị

Tùy chọn này chỉ được hỗ trợ cho một trục

Type. string

Mặc định. Tương đương với 'pretty', nhưng

Chỉ định phạm vi cắt xén của trục tung

Kiểu. sự vật

Mặc định. vô giá trị

• Đối với một trục

  Giá trị dữ liệu dọc tối đa để hiển thị

• Đối với một trục

  Chỉ mục hàng dựa trên số 0 nơi cửa sổ cắt xén kết thúc. Các điểm dữ liệu tại chỉ mục này trở lên sẽ bị cắt bỏ. Kết hợp với

  16, nó xác định phạm vi mở một nửa [min, max) biểu thị các chỉ số phần tử sẽ hiển thị. Nói cách khác, mọi chỉ mục sao cho
  17 sẽ được hiển thị

Bị bỏ qua khi

Type. number

Default. auto

• Đối với một trục

  Giá trị dữ liệu dọc tối thiểu để hiển thị

• Đối với một trục

  Chỉ mục hàng dựa trên số 0 nơi cửa sổ cắt xén bắt đầu. Điểm dữ liệu tại các chỉ số thấp hơn mức này sẽ bị cắt. Kết hợp với

  21, nó xác định phạm vi mở một nửa [min, max) biểu thị các chỉ số phần tử sẽ hiển thị. Nói cách khác, mọi chỉ mục sao cho
  17 sẽ được hiển thị. Bị bỏ qua khi
  18 là 'khá' hoặc 'tối đa'

Bị bỏ qua khi

Type. number

Default. auto

Chiều rộng của biểu đồ, tính bằng pixel

Type. number

Mặc định. chiều rộng của phần tử chứa

phương pháp

Vẽ biểu đồ. Biểu đồ chỉ chấp nhận các cuộc gọi phương thức khác sau khi sự kiện được kích hoạt.

Loại trả lại. không có

Trả về đối tượng hành động tooltip với

Loại trả lại. sự vật

Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của thành phần biểu đồ

33

Chiều cao của khu vực biểu đồ

34Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc cột_______1_______35Hộp giới hạn của nêm thứ năm của biểu đồ hình tròn

36Hộp giới hạn của dữ liệu biểu đồ dọc (e. g. , biểu đồ cột.

37Khung giới hạn của dữ liệu biểu đồ theo chiều ngang (e. g. , biểu đồ cột.

38

Các giá trị có liên quan đến vùng chứa của biểu đồ. Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. sự vật

Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của nội dung biểu đồ (i. e. , không bao gồm nhãn và chú giải)

33

41

42

43

44

Các giá trị có liên quan đến vùng chứa của biểu đồ. Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. sự vật

Trả về một đối tượng chứa thông tin về vị trí trên màn hình của biểu đồ và các thành phần của nó

Các phương thức sau có thể được gọi trên đối tượng được trả về

• 46

• 47

• 48

• 49

• 50

• 51

Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. sự vật

Trả về giá trị dữ liệu theo chiều ngang tại

Ví dụ.

Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. con số

Trả về biểu đồ được tuần tự hóa dưới dạng URI hình ảnh

Gọi điều này sau khi biểu đồ được vẽ

Xem In Biểu đồ PNG

Loại trả lại. sợi dây

Trả về một mảng các thực thể biểu đồ đã chọn. Các thực thể có thể lựa chọn là các thanh, mục chú thích và danh mục. Đối với biểu đồ này, chỉ có thể chọn một thực thể tại bất kỳ thời điểm nào.

Loại trả lại. Mảng các phần tử lựa chọn

Trả về giá trị dữ liệu dọc tại _______1_______59, là pixel lệch xuống so với cạnh trên cùng của vùng chứa biểu đồ. có thể là tiêu cực

Ví dụ.

Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. con số

Trả về tọa độ x pixel của

Ví dụ.

Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. con số

Trả về tọa độ y pixel của

Ví dụ.

Gọi điều này sau khi biểu đồ được vẽ

Loại trả lại. con số

Xóa hành động chú giải công cụ với

Loại trả lại.

Đặt một hành động chú giải công cụ sẽ được thực thi khi người dùng nhấp vào văn bản hành động

Phương thức

Bất kỳ và tất cả các hành động chú giải công cụ phải được đặt trước khi gọi phương thức

Loại trả lại.

Chọn các thực thể biểu đồ được chỉ định. Hủy mọi lựa chọn trước đó. Các thực thể có thể lựa chọn là các thanh, mục chú thích và danh mục. Đối với biểu đồ này, mỗi lần chỉ có thể chọn một thực thể.

Loại trả lại. không có

Xóa biểu đồ và giải phóng tất cả các tài nguyên được phân bổ của nó

Loại trả lại. không có

Sự kiện

Để biết thêm thông tin về cách sử dụng các sự kiện này, hãy xem Tương tác cơ bản, Xử lý sự kiện và Kích hoạt sự kiện

Được kích hoạt khi hoạt ảnh chuyển tiếp hoàn tất

Của cải. không có

Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Có thể được sử dụng để xác định thời điểm tiêu đề, thành phần dữ liệu, mục chú thích, trục, đường lưới hoặc nhãn được nhấp vào

Của cải. ID mục tiêu

Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ

Của cải. id, tin nhắn

Được kích hoạt khi người dùng nhấp vào mũi tên phân trang chú giải. Trả lại chỉ mục trang dựa trên số 0 chú giải hiện tại và tổng số trang

Của cải. currentPage Index, totalPages

Được kích hoạt khi người dùng di chuột qua một thực thể trực quan. Trả lại chỉ số hàng và cột của phần tử bảng dữ liệu tương ứng. Một thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng là null) và một thể loại cho một hàng (chỉ mục cột là null)

Của cải. hàng, cột

Được kích hoạt khi người dùng di chuột khỏi một thực thể trực quan. Trả lại chỉ số hàng và cột của phần tử bảng dữ liệu tương ứng. Một thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng là null) và một thể loại cho một hàng (chỉ mục cột là null)

Của cải. hàng, cột

Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu bạn muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ nó, bạn nên thiết lập một trình lắng nghe cho sự kiện này trước khi gọi phương thức