gpt4 book ai didi

javascript - 使用 HTML 和 Javascript 的散点图(使 y 轴从零开始(上下颠倒))

转载 作者:行者123 更新时间:2023-11-30 15:49:58 24 4
gpt4 key购买 nike

您好,我正在使用以下散点图代码

https://www.tutorialspoint.com/highcharts/highcharts_scatter_basic.htm

在这方面我不需要负值。当我只传递正值数据时,它就解决了。

我需要使我的 y 轴值反转。也就是说 Y 轴应该从零开始。x轴相同。

请帮助我做到这一点。我的代码如下

<html>

<head>
<title>User Interaction </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="ourgraph.js"></script>
</head>
<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
var edata;
var i;

//a = new Array();
$(document).ready(function() {
var chart = {
type: 'scatter',
zoomType: 'xy'
};
var title = {
text: 'User Interaction Touch points'
};
var subtitle = {
text: 'Source: charmboard database'
};
var xAxis = {
//range = [0,320]
title: {
enabled: true,
text: 'Height (px)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
};
var yAxis = {
//range = [0,180]
title: {
text: 'Width (px)'
}
};
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 0.1
}
var plotOptions = {
scatter: {
marker: {
radius: 0.5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} x-px, {point.y} y-px'
}
}
};

// http call for data

$.ajax({
url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
type: 'GET',
context: document.body,
success: function(data){

//console.log(data[0]);
//console.log(data[1]);
//console.log(data);

// http call for end

//writeing a data to file starts with removed time slot colum, negatvie values , x axis 0-320 ,y axis 0-180 alone

// data.forEach(function(i)
//{
// if (i[0]> 0 && i[0] < 320 && i[1] >0 && i[1] <180)
// {

//
// edata = data.slice(2);


//}

//});

//writeing a data to file ends with removed time slot colum, negatvie values , x axis 0-320 ,y axis 0-180 alone
var series= [{
name: 'Touches',
color: 'rgba(223, 83, 83, .5)',



data: data


}
];

var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.legend = legend;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);


}
});






});
</script>
</body>
</html>

最佳答案

由于教程使用的是 HighCharts,因此最好在此处打开 docs .

至于答案你需要改变这个:

var yAxis = {
title: {
text: 'Weight (kg)'
}
};

对此:

var yAxis = {
title: {
text: 'Weight (kg)'
},
min: 0 // Make sure you add this.
};

希望对您有所帮助!

关于javascript - 使用 HTML 和 Javascript 的散点图(使 y 轴从零开始(上下颠倒)),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39529753/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com