先来个截图：
代码：
<?php
define('IN_ECS', true);
require (dirname(__FILE__) . '/includes/init.php');
/* 载入语言文件 */
require_once (ROOT_PATH . 'languages/' . $_CFG['lang'] . '/user.php');
$datashow=array();
$sqljs = "select * FROM " . $GLOBALS['ecs']->table("qushi") . " order by ndate asc ";
$rowjs=$db->getALL($sqljs);
foreach($rowjs as $k=>$v){
$datashow[$k]=array(y=>floatval($v["ndata"]),label=>date("Y-m-d",$v["ndate"]));
//array_push($datashow,$v);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="themesmobile/68ecshopcom_mobile/css/public.css"/>
<link rel="stylesheet" type="text/css" href="themesmobile/68ecshopcom_mobile/css/login.css"/>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!--<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>-->
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<title>折线图</title>
<style>
.chartContainer{
top:20%;
width: 100%;
height: 350px;
}
</style>
</head>
<body>
<header id="header" class='header' style="position:fixed">
<div class="h-left"><a href="javascript:history.back(-1)" class="back"></a></div>
<div class="h-mid">产能走势</div>
</header>
<div style="height:180px;"></div>
<div id="chartContainer" class="chartContainer"></div>
<script type="text/javascript">
//Ajax调用处理
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme4",
animationEnabled: true,
axisY: {
title: "产能走势图 千分比"
},
data: [
{
type: "line",
color: "rgba(103, 148, 239, 1)",
markerColor: "rgba(103, 148, 239, 1)",
markerSize: 16,
dataPoints:<?php echo json_encode($datashow, JSON_NUMERIC_CHECK); ?>
}
]
});
chart.render();
function addImages(chart) {
for(var i = 0; i < chart.data[0].dataPoints.length; i++){
var dpsName = chart.data[0].dataPoints[i].markerType;
if(dpsName == "rainy"){
images.push(
$('<img>').attr('src', "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/rainy.png")
);
}
else if(dpsName == "sunny"){
images.push(
$('<img>').attr('src', "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/sunny.png")
);
}
images[i].attr("class", dpsName)
.appendTo($("#chartContainer>.canvasjs-chart-container"));
positionImage(images[i], i);
}
}
function positionImage(image, index) {
var imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[index].x);
var imageY = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[index].y);
var imageTop = chart.axisY[0].convertValueToPixel(chart.axisY[0].maximum);
image.width('20px')
.css({
"position": "absolute",
"left": imageCenter - 10 + "px",
"top": imageY - 10 + "px"
}
);
}
$( window ).resize(function() {
var rainyCounter = 0, sunnyCounter = 0;
var imageCenter = 0;
});
function formatter(e) {
if(e.index === 0 && e.dataPoint.x === 0) {
return " Low " + e.dataPoint.y[e.index];
}
if(e.index == 1 && e.dataPoint.x === 0) {
return " High " + e.dataPoint.y[e.index];
}
else{
return e.dataPoint.y[e.index];
}
}
</script>
</body>
</html>