如何在javascript中使用谷歌图表将x轴点交换到y轴
[英]How to interchange x-axis points to y-axis using google charts in javascript
问题描述
I'm trying to plot charts for my project takes pressure at x-axis and measure depth as y-axis ie pressure vs measure depth I plotted wrong graph ,using google chart , how can interchange x and y axis points values in the graph , Can any one help us.
我正在尝试为我的项目绘制图表，在x 轴上施加压力并将深度测量为y 轴，即压力与测量深度我绘制了错误的图表，使用谷歌图表，如何交换图表中的 x 和 y 轴点值，任何人都可以帮助我们。 I expect output like this Below I have posted my code which i have tried我希望输出是这样的下面我已经发布了我尝试过的代码
<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>
1 个解决方案
解决方案1
0 已采纳 2020-03-24 12:23:08
in google charts, the x-axis is always the first column in the data table.在谷歌图表中，x 轴始终是数据表中的第一列。
if you want to pressure as the x-axis, then simply swap the order of the values when adding the rows.如果您想将压力作为 x 轴，那么只需在添加行时交换值的顺序。
make pressure first...先施压……
data.addRows([[jsonData.result.abcData[i].pressure, jsonData.result.abcData[i].measuredepth]]);
also, if you don't want google to guess as to which labels to use for the x-axis,此外，如果您不想让谷歌猜测 x 轴使用哪些标签，
you can add your own ticks.您可以添加自己的刻度。
here, we build dynamically...在这里，我们动态构建...
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
},
...
};
you can obviously hard-code as well...你显然也可以硬编码......
hAxis: {
ticks: [0, 1000, 2000, 3000, 4000]
},
note: if the data is not in order when loaded,注意：如果加载时数据没有顺序，
you'll want to sort the data table by the x-axis before drawing...在绘制之前，您需要按 x 轴对数据表进行排序...
data.sort([{column: 0}]);
see following working snippet...请参阅以下工作片段...
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.