实用代码,用php+js走势图代码分享

先来个截图：

代码：

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);

}

?>

%20

%20

–>%20

%20

%20

%20

.chartContainer{

top:20%;

width: 100%;

height: 350px;

}

//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:

}

]

});

chart.render();

function addImages(chart) {

for(var i = 0; i

var dpsName = chart.data[0].dataPoints[i].markerType;

if(dpsName == “rainy”){

images.push(

$(‘’).attr(‘src’, “#34;)

);

}

else if(dpsName == “sunny”){

images.push(

$(‘’).attr(‘src’, “#34;)

);

}

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];

}

}