自定义点

概览

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

```  <head>
<script type="text/javascript">
function drawChart() {
([['X', '1', '2', '3', '4', '5', '6'],
[1, 2, null, null, null, null, null],
[2, null, 3, null, null, null, null],
[3, null, null, 4, null, null, null],
[4, null, null, null, 5, null, null],
[5, null, null, null, null, 6, null],
[6, null, null, null, null, null, 7]
]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
```

一些简单示例

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

```  <head>
<script type="text/javascript">
function drawChart() {
([['X', 'Y'],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
[5, 4],
[6, 3],
[7, 2.5],
[8, 3]
]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
```

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

```  <head>
<script type="text/javascript">
function drawChart() {
([['X', 'Y'],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
[5, 4],
[6, 3],
[7, 2.5],
[8, 3]
]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
```

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

```<html>
<script type="text/javascript">
function drawChart() {
([['X', 'Y'],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
[5, 4],
[6, 3],
[7, 2.5],
[8, 3]
]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
```

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

```<html>
<script type="text/javascript">
function drawChart() {
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn( { type: 'string', role: 'annotation' });
data.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]);
data.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]);
data.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]);
data.addRow(['D', , , , , , , 1, "default", , , , , , null]);
data.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]);
data.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]);
data.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
```

轮替

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

```  <head>
<script type="text/javascript">
function drawChart() {
([['X', 'Y'],
[1, 3],
[2, 2.5],
[3, 2],
[4, 3],
[5, 4.5],
[6, 6.5],
[7, 9],
[8, 12]
]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
```

自定义各个点

```<html>
<script type="text/javascript">

function drawChart() {
([['X', 'Y', {'type': 'string', 'role': 'style'}],
[1, 3, null],
[2, 2.5, null],
[3, 3, null],
[4, 4, null],
[5, 4, null],
[6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
[7, 2.5, null],
[8, 3, null]
]);

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

chart.draw(data, options);
}
</script>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

```

• `fill-color`（以十六进制字符串形式指定。）
• `shape-dent`
• `shape-rotation`
• `shape-sides`
• `shape-type`
• `stroke-color`（以十六进制字符串形式指定。）
• `stroke-width`（以十六进制字符串形式指定。）
• `size`
• `visible`（点是否可见。）

[]
[]