Question

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

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>

Answer 1

由于本教程使用的是HighCharts，因此最好在那里打开docs。

至于答案，你需要改变这个：

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

对此：

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

希望有所帮助！

使用HTML和Java Script散布图表（使y轴从零开始（颠倒））

1 个答案: