自定义线条

概览

某些 Google 图表(例如面积图、折线图和组合图表)以线条连接数据点。您可以使用本页介绍的技巧自定义线条的颜色、粗细和虚线。

更改颜色

您可以通过两种细微不同的方式更改 Google 图表中连接数据点的线条的颜色:使用 colors 选项更改图表调色板,或使用 series 选项指定特定系列的颜色。

在下面的图表中,我们明确设置了每个系列的颜色。

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

       
};
<html>
 
<head>
   
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load("current", {packages:["corechart"]});
      google
.charts.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var data = google.visualization.arrayToDataTable
           
([['X', '1', '2', '3', '4', '5', '6'],
             
[1, 2, 3, 4, 5, 6, 7],
             
[2, 3, 4, 5, 6, 7, 8],
             
[3, 4, 5, 6, 7, 8, 9],
             
[4, 5, 6, 7, 8, 9, 10],
             
[5, 6, 7, 8, 9, 10, 11],
             
[6, 7, 8, 9, 10, 11, 12]
       
]);

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

       
};

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

上面的颜色以十六进制值(例如'#e2431e''#f00' 表示饱和红色),但也可以通过英文名称指定。以下示例对此进行了说明,还展示了如何通过使用 colors 选项修正图表调色板(而不是设置单个系列的颜色)来控制颜色。一个区别在于,如果您修正调色板,并且调色板中的颜色系列多于颜色,则系统会重复使用这些颜色:如果调色板由红色和蓝色组成,则该系列一半为红色,另一半为蓝色。

        var options = {
          legend
: 'none',
         
colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
       
};
<html>
 
<head>
   
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load("current", {packages:["corechart"]});
      google
.charts.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var data = google.visualization.arrayToDataTable
           
([['X', '1', '2', '3', '4', '5', '6'],
             
[1, 2, 3, 4, 5, 6, 7],
             
[2, 3, 4, 5, 6, 7, 8],
             
[3, 4, 5, 6, 7, 8, 9],
             
[4, 5, 6, 7, 8, 9, 10],
             
[5, 6, 7, 8, 9, 10, 11],
             
[6, 7, 8, 9, 10, 11, 12]
       
]);

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

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

更改厚度

您可以使用 lineWidth 选项控制线条的粗细:

        var options = {
          legend
: 'none',
          hAxis
: { maxValue: 7 },
          vAxis
: { maxValue: 13 },
         
lineWidth: 10,
          colors
: ['#e2431e', '#d3362d', '#e7711b',
                   
'#e49307', '#e49307', '#b9c246']
       
};
<html>
 
<head>
   
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load("current", {packages:["corechart"]});
      google
.charts.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var data = google.visualization.arrayToDataTable
           
([['X', '1', '2', '3', '4', '5', '6'],
             
[1, 2, 3, 4, 5, 6, 7],
             
[2, 3, 4, 5, 6, 7, 8],
             
[3, 4, 5, 6, 7, 8, 9],
             
[4, 5, 6, 7, 8, 9, 10],
             
[5, 6, 7, 8, 9, 10, 11],
             
[6, 7, 8, 9, 10, 11, 12]
       
]);

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

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

如需控制序列的线宽,请使用 series 选项:

        var options = {
          legend
: 'none',
          hAxis
: { maxValue: 7 },
          vAxis
: { maxValue: 13 },
         
series: {
           
0: { lineWidth: 1 },
           
1: { lineWidth: 2 },
           
2: { lineWidth: 4 },
           
3: { lineWidth: 8 },
           
4: { lineWidth: 16 },
           
5: { lineWidth: 24 }
         
},

          colors
: ['#e2431e', '#d3362d', '#e7711b',
                   
'#e49307', '#e49307', '#b9c246']
       
};
<html>
 
<head>
   
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load("current", {packages:["corechart"]});
      google
.charts.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var data = google.visualization.arrayToDataTable
           
([['X', '1', '2', '3', '4', '5', '6'],
             
[1, 2, 3, 4, 5, 6, 7],
             
[2, 3, 4, 5, 6, 7, 8],
             
[3, 4, 5, 6, 7, 8, 9],
             
[4, 5, 6, 7, 8, 9, 10],
             
[5, 6, 7, 8, 9, 10, 11],
             
[6, 7, 8, 9, 10, 11, 12]
       
]);

       
var options = {
          legend
: 'none',
          hAxis
: { maxValue: 7 },
          vAxis
: { maxValue: 13 },
         
series: {
           
0: { lineWidth: 1 },
           
1: { lineWidth: 2 },
           
2: { lineWidth: 4 },
           
3: { lineWidth: 8 },
           
4: { lineWidth: 16 },
           
5: { lineWidth: 24 }
         
},

          colors
: ['#e2431e', '#d3362d', '#e7711b',
                   
'#e49307', '#e49307', '#b9c246']
       
};

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

虚线

通过接受数字数组的 lineDashStyle 选项,可以采用多种虚线样式。第一个数字表示短划线的长度,第二个数字表示短划线的长度。如果有第三个数字,则是下一个短划线的长度;第四个数字(如果存在)是下一个间隔的长度。

在绘制图表时,这些长度会重复,因此 [4, 4] 表示一系列 4 个长度的短划线和 4 个长度的间隙。[5, 1, 3] 表示 5 长度的短划线、1 长度的间隔、3 长度的短划线、5 长度的间隔等。部分示例:

        var options = {
          hAxis
: { maxValue: 10 },
          vAxis
: { maxValue: 18 },
          chartArea
: { width: 380 },
          lineWidth
: 4,
         
series: {
           
0: { lineDashStyle: [1, 1] },
           
1: { lineDashStyle: [2, 2] },
           
2: { lineDashStyle: [4, 4] },
           
3: { lineDashStyle: [5, 1, 3] },
           
4: { lineDashStyle: [4, 1] },
           
5: { lineDashStyle: [10, 2] },
           
6: { lineDashStyle: [14, 2, 7, 2] },
           
7: { lineDashStyle: [14, 2, 2, 7] },
           
8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
         
},

          colors
: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   
'#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
       
};
<html>
 
<head>
   
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load("current", {packages:["corechart"]});
      google
.charts.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var data = google.visualization.arrayToDataTable
           
([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
               
'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
               
'lineDashStyle: [4, 1]',
               
'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
               
'lineDashStyle: [14, 2, 2, 7]',
               
'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
             
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
             
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
             
[3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
             
[4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
             
[5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
             
[6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
             
[7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
             
[8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
             
[9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
       
]);

       
var options = {
          hAxis
: { maxValue: 10 },
          vAxis
: { maxValue: 18 },
          chartArea
: { width: 380 },
          lineWidth
: 4,
         
series: {
           
0: { lineDashStyle: [1, 1] },
           
1: { lineDashStyle: [2, 2] },
           
2: { lineDashStyle: [4, 4] },
           
3: { lineDashStyle: [5, 1, 3] },
           
4: { lineDashStyle: [4, 1] },
           
5: { lineDashStyle: [10, 2] },
           
6: { lineDashStyle: [14, 2, 7, 2] },
           
7: { lineDashStyle: [14, 2, 2, 7] },
           
8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
         
},

          colors
: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   
'#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
       
};

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