Javascript 使用HTML和Java脚本的散点图（使y轴从零开始（倒置））
嗨，我正在使用下面的散点图代码 在这里，我不需要负值。当我只传递正值数据时，它就被解决了 我需要反转y轴的值。也就是说Y轴应该从零开始。 x轴相同 请帮我做这件事。我的代码如下Javascript 使用HTML和Java脚本的散点图（使y轴从零开始（倒置））,javascript,html,charts,highcharts,scatter-plot,Javascript,Html,Charts,Highcharts,Scatter Plot,嗨，我正在使用下面的散点图代码 在这里，我不需要负值。当我只传递正值数据时，它就被解决了 我需要反转y轴的值。也就是说Y轴应该从零开始。 x轴相同 请帮我做这件事。我的代码如下 <html> <head> <title>User Interaction </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<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>
用户交互
伊达变种；
var i；
//a=新数组（）；
$（文档）.ready（函数（）{
var图表={
键入：“散布”，
zoomType:'xy'
};
变量标题={
文本：“用户交互接触点”
};
变量字幕={
文本：“来源：charmboard数据库”
};
变量xAxis={
//范围=[0320]
标题：{
启用：对，
文本：“高度（px）”
},
是的，
恩东蒂克：是的，
showLastLabel:true
};
变量yAxis={
//范围=[0180]
标题：{
文本：“宽度（px）”
}
};
变量图例={
布局：“垂直”，
对齐：“左”，
垂直排列：“顶部”，
x:100，
y:70，
浮动：是的，
背景颜色：（Highcharts.theme&&Highcharts.theme.legendBackgroundColor）| |'#FFFFFF'，
边框宽度：0.1
}
变量plotOptions={
散布：{
标记：{
半径：0.5，
国家：{
悬停：{
启用：对，
线条颜色：“rgb（100100）”
}
}
},
国家：{
悬停：{
标记：{
已启用：false
}
}
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.x}x-px，{point.y}y-px”
}
}
};
//http数据调用
$.ajax({
url:“xxxxxxxxxxxxxxxxxxxxxxxx”，
键入：“GET”，
上下文：document.body，
成功：功能（数据）{
//console.log（数据[0]）；
//console.log（数据[1]）；
//控制台日志（数据）；
//http呼叫结束
//将数据写入文件首先删除时隙列，取反值，x轴0-320，y轴0-180
//data.forEach（函数（i）
//{
//如果（i[0]>0&&i[0]<320&&i[1]>0&&i[1]，因为教程使用的是HighCharts，最好在那里打开
至于答案，您需要更改以下内容：
var yAxis = {
title: {
text: 'Weight (kg)'
}
};
为此：
var yAxis = {
title: {
text: 'Weight (kg)'
},
min: 0 // Make sure you add this.
};
希望有帮助