是否可以将 x 轴和 y 轴绘制为 google 散点图中平均点的线
Is it possible to plot x axis and y axis as line for an average point in google scattered plot
我有一个散点图,其中绘制了所有点和一个平均点。我需要的是在散点图中为该平均点绘制 x 轴和 y 轴。可能吗?下面是我的代码片段。
代码:
function drawChart(paramObj)
{
if (paramObj == 'undefined') {
alert('Something wrong with configuration');
return false;
}
var data = new google.visualization.DataTable();
var addRows = new Array();
var chart = null;
var headers = null;
jQuery.each(paramObj.dataArray.split('\n'), function (index, value) {
var tabs = value.split('\t');
if (tabs.length != 7) {
return;
}
if (index != undefined && index == 0) {
headers = tabs;
data.addColumn('number', dfv(1, headers, ''));
data.addColumn('number', dfv(2, headers, ''));
} else {
var name = dfv(0, tabs, '');
var xval = parseFloat(parseFloat(dfv(1, tabs, '')).toFixed(2));
var yval = parseFloat(parseFloat(dfv(2, tabs, '')).toFixed(2));
var xval_ori = parseFloat(parseFloat(dfv(3, tabs, '')).toFixed(2));
var yval_ori = parseFloat(parseFloat(dfv(4, tabs, '')).toFixed(2));
var opt1_val = dfv(5, tabs, '');
var opt2_val = dfv(6, tabs, '');
if (name == 'Average') {
var test = [
xval,yval,
name + '\n' +
dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
'point { size: 4; shape-type: circle; fill-color: red; }'
];
} else {
var test = [
xval,yval,
name + '\n' +
dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
null
];
}
addRows.push(test);
}
});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows(addRows);
var options = {
title: dov('title', paramObj, '(no title)'),
hAxis: {title: dov('xLabel', paramObj, '')},
vAxis: {title: dov('yLabel', paramObj, '')},
legend: dov('legend', paramObj, 'none'),
width: dov('width', paramObj, 1200),
height: dov('height', paramObj, 800),
chartArea: {left:100,top:50,right:100,bottom:50}
};
switch (dov('graphType', paramObj, 'scatter')) {
case 'scatter':
chart = new google.visualization.ScatterChart(document.getElementById(dov('container_id', paramObj, 'container')));
break;
default:
break;
}
if (chart) {
chart.draw(data, options);
return true;
}
return false;
}
我确实从 google 散点图 API 本身在图 API 的选项数组中找到了一种方法。
见下面的代码:
hAxis: {title: 'title1', baseline:base_x, baselineColor:'red'}
vAxis: {title: 'title2', baseline:base_y, baselineColor:'red'}
其中 base_x 和 base_y 是平均 x 和 y 坐标点。
希望这对以后的人有所帮助,我们将得到如下图:
绘制从平均点到每个轴的线,
为平均值系列添加一个单独的列
data.addColumn('number', 'AVG');
添加三行数据以从每个轴绘制直线,例如
var avgX = 50;
var avgY = 50;
data.addRows([
[0, null, avgY],
[avgX, null, avgY],
[avgX, null, 0]
]);
请参阅以下工作片段...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
for (var i = 0; i < 100; i++) {
data.addRow([
Math.floor(Math.random()*100),
Math.floor(Math.random()*100)
]);
}
// add average point
data.addColumn('number', 'AVG');
var avgX = 50;
var avgY = 50;
data.addRows([
[0, null, avgY],
[avgX, null, avgY],
[avgX, null, 0]
]);
var options = {
series: {
// change average series to line
1: {
lineWidth: 2,
pointSize: 0
}
},
legend: {
position: 'bottom',
textStyle: {
bold: true,
fontSize: 20
}
}
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.ScatterChart(chartDiv);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
我有一个散点图,其中绘制了所有点和一个平均点。我需要的是在散点图中为该平均点绘制 x 轴和 y 轴。可能吗?下面是我的代码片段。
代码:
function drawChart(paramObj)
{
if (paramObj == 'undefined') {
alert('Something wrong with configuration');
return false;
}
var data = new google.visualization.DataTable();
var addRows = new Array();
var chart = null;
var headers = null;
jQuery.each(paramObj.dataArray.split('\n'), function (index, value) {
var tabs = value.split('\t');
if (tabs.length != 7) {
return;
}
if (index != undefined && index == 0) {
headers = tabs;
data.addColumn('number', dfv(1, headers, ''));
data.addColumn('number', dfv(2, headers, ''));
} else {
var name = dfv(0, tabs, '');
var xval = parseFloat(parseFloat(dfv(1, tabs, '')).toFixed(2));
var yval = parseFloat(parseFloat(dfv(2, tabs, '')).toFixed(2));
var xval_ori = parseFloat(parseFloat(dfv(3, tabs, '')).toFixed(2));
var yval_ori = parseFloat(parseFloat(dfv(4, tabs, '')).toFixed(2));
var opt1_val = dfv(5, tabs, '');
var opt2_val = dfv(6, tabs, '');
if (name == 'Average') {
var test = [
xval,yval,
name + '\n' +
dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
'point { size: 4; shape-type: circle; fill-color: red; }'
];
} else {
var test = [
xval,yval,
name + '\n' +
dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
null
];
}
addRows.push(test);
}
});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows(addRows);
var options = {
title: dov('title', paramObj, '(no title)'),
hAxis: {title: dov('xLabel', paramObj, '')},
vAxis: {title: dov('yLabel', paramObj, '')},
legend: dov('legend', paramObj, 'none'),
width: dov('width', paramObj, 1200),
height: dov('height', paramObj, 800),
chartArea: {left:100,top:50,right:100,bottom:50}
};
switch (dov('graphType', paramObj, 'scatter')) {
case 'scatter':
chart = new google.visualization.ScatterChart(document.getElementById(dov('container_id', paramObj, 'container')));
break;
default:
break;
}
if (chart) {
chart.draw(data, options);
return true;
}
return false;
}
我确实从 google 散点图 API 本身在图 API 的选项数组中找到了一种方法。
见下面的代码:
hAxis: {title: 'title1', baseline:base_x, baselineColor:'red'}
vAxis: {title: 'title2', baseline:base_y, baselineColor:'red'}
其中 base_x 和 base_y 是平均 x 和 y 坐标点。
希望这对以后的人有所帮助,我们将得到如下图:
绘制从平均点到每个轴的线,
为平均值系列添加一个单独的列
data.addColumn('number', 'AVG');
添加三行数据以从每个轴绘制直线,例如
var avgX = 50;
var avgY = 50;
data.addRows([
[0, null, avgY],
[avgX, null, avgY],
[avgX, null, 0]
]);
请参阅以下工作片段...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
for (var i = 0; i < 100; i++) {
data.addRow([
Math.floor(Math.random()*100),
Math.floor(Math.random()*100)
]);
}
// add average point
data.addColumn('number', 'AVG');
var avgX = 50;
var avgY = 50;
data.addRows([
[0, null, avgY],
[avgX, null, avgY],
[avgX, null, 0]
]);
var options = {
series: {
// change average series to line
1: {
lineWidth: 2,
pointSize: 0
}
},
legend: {
position: 'bottom',
textStyle: {
bold: true,
fontSize: 20
}
}
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.ScatterChart(chartDiv);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>