Question

我想在我的图表中添加一个范围选择器，但我不知道该怎么做。我从jsfiddle尝试了一些例子，但它没有用。

这是我的代码：

<meta http-equiv="refresh" content="65;url=http://localhost/23-1_chart.php"/>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/XXX.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>
</head>
<body>


<div id="chart" style="height: 400px; margin: 0 auto"></div>

<script>
$(function() {
//Highcharts with mySQL and PHP - Ajax101.com

var Voc_value = [];
var time = [];
var switch1 = true;
$.get('23-1_values.php', function(data) {

data = data.split('/');
for (var i in data) {
if (switch1 == true) {
time.push(data[i]);   
switch1 = false;
} else {
  Voc_value.push(parseFloat(data[i]));
  switch1 = true;
}

}
time.pop();  // cursor

$('#chart').highcharts({
chart : {
type : 'spline'
},
title : {
  text : 'VOC-Value-A.ROOM'
},
subtitle : {
  text : 'Room A'
},
xAxis : {
 title : {
 text : 'time'
 },
categories : time
 },
yAxis : {
title : {
text : 'VOC-value in ppm'
},
labels : {
  formatter : function() {
    return this.value + 'VOCvalue'
  }
 }
},
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : 'ppm'
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{

name : 'VOC-value in ppm',
data : Voc_value
}]
});
});
});</script>

首先我读取sql值并将其放入23-1_values.php。我的sql值是从这个php-page 23.1_values.php中读取的，然后是图表构建。我在横坐标轴上有日期时间（day-hour-min-s），在纵坐标轴上有ppm值我得到了太多的值，想要减少dateformat并在图表中添加一个范围选择器。

我该怎么做？

由于

Answer 1

我真的不知道我做了什么，但它现在正在运作。非常感谢你帮助我。这是代码：

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>XXXXXXXXX</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    $.getJSON("XXX.php", function(data) {

    // Create a timer
    var start = + new Date();

    // Create the chart
    $('#container').highcharts('StockChart', {
        chart: {
            events: {
                load: function(chart) {
                    this.setTitle(null, {
                        text: 'Built chart at '+ (new Date() - start) +'ms'
                    });
                }
            },
            zoomType: 'x'
        },

        rangeSelector: {
            buttons: [{
                type: 'day',
                count: 1,
                text: '24h'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 0
        },

        yAxis: {
            title: {
                text: 'XX'
            }
        },

        title: {
            text: 'XX'
        },

        subtitle: {
            text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
        },

        series: [{
            name: 'XX',
            type: 'area',
            data: data,
            tooltip: {
                valueDecimals: 1,
                valueSuffix: ' ppm'
            },
            fillColor : {
                linearGradient : {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
            },
        }/*,
        {
            name: 'Temperatur',
            type: 'area',
            data: datarasp,
            tooltip: {
                valueDecimals: 1,
                valueSuffix: ' °C'
            },
            fillColor : {
                linearGradient : {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
            },
        }*/]

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


   <div id="container" style="height: 500px; min-width: 500px"></div>
   </body>
   </html>

希望它会帮助某人

html网站中用于SQL数据的范围选择器的Highchart

1 个答案: