Question

我正在使用Google Scatter Chart APIs来尝试绘制像Github那样的打卡图表。我不知道如何更改显示的每个点的标记大小。这个API有可能吗？

Answer 1

是的，这是可能的，但是如果使用新的“材料设计”散点图（由new google.charts.Scatter()创建）则可以。但是，如果使用普通的散点图（由new google.visualization.ScatterChart()创建），则可以通过为每个点以及数据传递样式参数来做到这一点。

例如，如果通常将每个点定义为[x, y]，则应将其定义为[x, y, point_style]。

point_style的示例为'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }';

因此，样本数据点将为[10, 5, 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }']

最后，您需要确保已在数据列集中添加了样式列，如下所示：

var data = new google.visualization.DataTable();

data.addColumn('number', x_axis_title);
data.addColumn('number', y_axis_title);
data.addColumn( {'type': 'string', 'role': 'style'} ); // Defines point style

如果您已完成这些操作---添加了样式数据列并为每个点定义了样式---那么您的自定义样式将显示在图表上。

如果要一次为所有点设置它们，还可以在图形的选项中定义pointSize和pointShape，但是不能以这种方式定义单个点，因此上述方法如果您想进行更精细的控制，效果会更好。

Google Scatter图表，不同的点大小

1 个答案: