我正在尝试为我的项目绘制图表，以x轴上的压力作为y轴测量深度，即压力与测量深度， 我用google chart绘制了错误的图，如何在图中交换x和y轴点的值，谁能帮助我们。我希望这样的输出下面我已经发布了我尝试过的代码
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
let jsonData = {
"result": {
"abcData": [
{
"measuredepth": 0,
"pressure": 2500,
}, {
"measuredepth": 0,
"pressure": 2492,
},
{
"measuredepth": 4450,
"pressure": 3259
},
{
"measuredepth": 4500,
"pressure": 3273
}]
}
}
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'md');
// data.addColumn('number', 'CT');
data.addColumn('number', 'WELL');
for (let i = 0; i < jsonData.result.abcData.length; i++) {
debugger;
data.addRows([[jsonData.result.abcData[i].measuredepth, jsonData.result.abcData[i].pressure]]);
}
var options = {
title: 'GRaph-data',
width: 900,
height: 500,
chartArea: {
top: 100
},
vAxis: {
direction: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
//chart.draw(data, options);
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
var fontSize;
var yCoord;
Array.prototype.forEach.call(labels, function (label) {
fontSize = parseFloat(label.getAttribute('font-size'));
switch (label.getAttribute('text-anchor')) {
// chart title
case 'start':
yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord - fontSize);
break;
// x-axis labels
case 'middle':
label.setAttribute('y', chartBounds.top - (fontSize / 2));
break;
// y-axis labels
default:
// ignore
}
});
});
chart.draw(data, options);
}
);
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
在Google图表中，x轴始终是数据表中的第一列。
如果要将压力作为x轴，则只需在添加行时交换值的顺序即可。
首先施加压力...
data.addRows([[jsonData.result.abcData[i].pressure, jsonData.result.abcData[i].measuredepth]]);
另外，如果您不希望Google猜测用于X轴的标签，则
可以添加自己的刻度。
在这里，我们动态地构建...
var ticks = [];
var range = data.getColumnRange(0);
for (var i = 0; i <= range.max; i=i+1000) {
ticks.push(i);
}
ticks.push(i);
var options = {
...
hAxis: {
ticks: ticks
},
...
};
您显然也可以硬编码...
hAxis: {
ticks: [0, 1000, 2000, 3000, 4000]
},
注意：如果加载时数据不正确，则
在绘制之前，您需要按x轴对数据表进行排序...
data.sort([{column: 0}]);
请参阅以下工作片段...
let jsonData = {
"result": {
"abcData": [
{
"measuredepth": 0,
"pressure": 2500,
}, {
"measuredepth": 0,
"pressure": 2492,
},
{
"measuredepth": 4450,
"pressure": 3259
},
{
"measuredepth": 4500,
"pressure": 3273
}]
}
}
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'md');
// data.addColumn('number', 'CT');
data.addColumn('number', 'WELL');
for (let i = 0; i < jsonData.result.abcData.length; i++) {
data.addRows([[jsonData.result.abcData[i].pressure, jsonData.result.abcData[i].measuredepth]]);
}
data.sort([{column: 0}]);
var ticks = [];
var range = data.getColumnRange(0);
for (var i = 0; i <= range.max; i=i+1000) {
ticks.push(i);
}
ticks.push(i);
var options = {
title: 'GRaph-data',
width: 900,
height: 500,
chartArea: {
top: 100
},
hAxis: {
ticks: ticks
},
vAxis: {
direction: 0
},
pointSize: 4
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
var fontSize;
var yCoord;
Array.prototype.forEach.call(labels, function (label) {
fontSize = parseFloat(label.getAttribute('font-size'));
switch (label.getAttribute('text-anchor')) {
// chart title
case 'start':
yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord - fontSize);
break;
// x-axis labels
case 'middle':
label.setAttribute('y', chartBounds.top - (fontSize / 2));
break;
// y-axis labels
default:
// ignore
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句