Javascript 谷歌图表-散点图记号和样式
我创建了一个散点图来可视化不同数据字段之间的关系。 可视化数据本质上可以是数字或标称/序号。 因此,标称值/序数值映射为数值。 一个简单的例子是“年龄+性别”,其中性别是名义上的,我映射“男性”=>1,“女性”=>2以获得所需的输出 到目前为止还不错,图表正在运行,但我需要帮助格式化它Javascript 谷歌图表-散点图记号和样式,javascript,google-visualization,Javascript,Google Visualization,我创建了一个散点图来可视化不同数据字段之间的关系。 可视化数据本质上可以是数字或标称/序号。 因此,标称值/序数值映射为数值。 一个简单的例子是“年龄+性别”,其中性别是名义上的,我映射“男性”=>1,“女性”=>2以获得所需的输出 到目前为止还不错,图表正在运行,但我需要帮助格式化它 正如你所看到的,第一个性别列显示在Y轴上,第二个在图的最右边。我希望它们的布局“漂亮”,比如在y轴的某个空间,右端的某个空间 此外,我还想在y轴上显示“男性”和“女性”的相应记号 分机: 我还想将数据分为不同的
正如你所看到的,第一个性别列显示在Y轴上,第二个在图的最右边。我希望它们的布局“漂亮”,比如在y轴的某个空间,右端的某个空间
此外,我还想在y轴上显示“男性”和“女性”的相应记号 分机: 我还想将数据分为不同的系列,以便能够以不同的颜色对“男性”和“女性”数据点进行着色 我所做的是在我的数据表中构建3列(年龄、男性、女性),但我不能正确地将其输出。目前,所有内容都合并到一个显示列中 以下是我目前的代码:var drawMe = function(){
var columns = 0;
var xColumns = 0;
var yColumns = 0;
var gdata = new google.visualization.DataTable();
/**
* data Object:
* data.xName = Name of x parameter
* data.yName = Name of y parameter
* data.x = data for x paramter
* data.y = data for y parameter
* data.xType = type of x parameter, either num (= number) or other (= string)
* data.yType = type of y parameter, either num (= number) or other (= string)
* data.xChoices = array of strings representing availble choices for x if xType !== num
* daty.yChoices = array of strings representing availble choices for y if yType !== num
*
*/
if(data.xType === 'num'){
gdata.addColumn('number', data.xName);
xColumns++;
columns++;
} else {
for(var i = 0; i < data.xChoices.length; i++){
gdata.addColumn('number', data.xChoices[i]);
xColumns++;
columns++;
}
}
if(data.yType === 'num'){
gdata.addColumn('number', data.yName);
yColumns++;
columns++;
} else {
for(var i = 0; i < data.yChoices.length; i++){
gdata.addColumn('number', data.yChoices[i]);
columns++;
yColumns++;
}
}
var x;
var y;
for(var i = 0; i < count; i++){ // count is set by closure, cause data is paged via ajax
// initialize zero row
var row = [];
for(var j = 0; j < columns; j++){
row[j] = null;
}
if(data.xType === 'num'){
x = parseFloat(data.x[i]);
row[0] = x;
} else {
var index = data.xChoices.indexOf(data.x[i]);
x = {
v: index + 1, // don't start at 0
f: data.xChoices[index],
};
row[index] = x;
}
if(data.yType === 'num'){
y = parseFloat(data.y[i]);
row[xColumns] = y;
} else {
var index = data.yChoices.indexOf(data.y[i]);
y = {
v: index + 1, // don't start at 0
f: data.yChoices[index],
};
row[xColumns + index] = y;
}
gdata.addRow(row);
}
var xTitle = data.xName;
if(data.xUnit){
xTitle += ' [' + data.xUnit + ']';
}
var yTitle = data.yName;
if(data.yUnit){
yTitle += ' [' + data.yUnit + ']';
}
var xGridLines = -1;
var yGridLines = -1;
var xTicks = false;
var yTicks = false;
if(data.xType !== 'num' && data.xChoices){
xGridLines = data.xChoices.length + 2;
xTicks = [{v: 0, f: ''}]; // empty tick at the beginning
for(var i = 0; i < data.xChoices.length; i++){
xTicks.push({v: i+1, f: data.xChoices[i]});
}
xTicks.push({v: 3, f: ''}); // empty tick at the end
}
if(data.yType !== 'num' && data.yChoices){
yGridLines = data.yChoices.length + 2;
yTicks = [{v: 0, f: ''}];
for(var i = 0; i < data.yChoices.length; i++){
yTicks.push({v: i+1, f: data.yChoices[i]});
}
yTicks.push({v: 3, f: ''});
}
var options = {
title: data.xName + ' vs. ' + data.yName,
hAxis: {
title: xTitle,
gridlines: {
count: xGridLines
}
},
vAxis: {
title: yTitle,
gridlines: {
count: yGridLines
}
}
};
if(xTicks !== false){
options.hAxis.ticks = xTicks;
options.hAxis.viewWindowMode = 'pretty';
}
if(yTicks !== false){
options.vAxis.ticks = yTicks;
options.vAxis.viewWindowMode = 'pretty';
}
options.series = {};
for(var i = 0; i < columns; i++){
options.series[i] = {color: atk.COLORS[i], visibleInLegend: true};
}
var chart = new google.visualization.ScatterChart(element);
chart.draw(gdata, options);
};
var drawMe=function(){
var列=0;
var xColumns=0;
var yColumns=0;
var gdata=new google.visualization.DataTable();
/**
*数据对象:
*data.xName=x参数的名称
*data.yName=y参数的名称
*data.x=x参数的数据
*data.y=y参数的数据
*data.xType=x参数的类型,num(=数字)或other(=字符串)
*data.yType=y参数的类型,num(=数字)或other(=字符串)
*data.xChoices=表示x可用选项的字符串数组,如果xType!==num
*daty.yChoices=表示y的可用选项的字符串数组,如果yType!==num
*
*/
如果(data.xType=='num'){
gdata.addColumn('number',data.xName);
xColumns++;
列++;
}否则{
对于(var i=0;i
谢谢你的帮助和时间 幸运的是,RC版本(1.1)中的API有一个更新,应该能够完全满足您的需要。首先加载RC版本:
google.load('visualization', '1.1', {packages: ['corechart']});
然后设置hAxis.ticks选项,如下所示:
hAxis: {
ticks: [{v: 0, f: ''}, {v: 1, f: 'Male'}, {v: 2, f: 'Female'}, {v: 3, f: ''}]
}
试试看它是否有效
编辑:
要使雄性和雌性颜色不同,需要将数据拆分为两个单独的列。你可以通过我们来完成
// assumes Male/Female is column 0 and age is column 1 in your DataTable
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'Age',
calc: function (dt, row) {
// return a value only if male
return (dt.getValue(row, 0) == 1) ? dt.getValue(row, 1) : null;
}
}, {
type: 'number',
label: 'Age',
calc: function (dt, row) {
// return a value only if female
return (dt.getValue(row, 0) == 2) ? dt.getValue(row, 1) : null;
}
}]);