Question

chart.js动态画图

比如有如下：
$.ajax({
type:"POST";

url:url,

data:data;

datatype:"json"

success:function(json){

}
});
如何利用chart.js或者其他的画图插件，实现读取json中的两个数据，作为横纵坐标画折线图或者柱状图。

Answer 1

//画图
//上证
var compareRangeListStr = JSON.stringify(compareRangeList);//json转换成字符串
compareRangeListStr = (compareRangeListStr.split("{")[1]).split("}")[0];//去掉大括号
compareRangeListStr = compareRangeListStr.replace(/"/g,"");//去掉转换字符串时多出来的双引号
var compareRangeListArr = (compareRangeListStr.split(",")).sort();//字符串转数组
//组合
var com_dailyRangeListStr = JSON.stringify(com_dailyRangeList);//json转换成字符串
com_dailyRangeListStr = (com_dailyRangeListStr.split("{")[1]).split("}")[0];//去掉大括号
com_dailyRangeListStr = com_dailyRangeListStr.replace(/"/g,"");//去掉转换字符串时多出来的双引号
var com_dailyRangeListArr = (com_dailyRangeListStr.split(",")).sort();//字符串转数组
var CRL_rangeList = [];//上证涨跌幅数组
var com_dateList = [];//组合日期数组
var com_rangeList = [];//组合涨跌幅数组
var maxSize = com_dailyRangeListArr.length < 20 ? com_dailyRangeListArr.length : 20; //加载数据的最大组数
for(var iForCom = 0; iForCom < maxSize; iForCom++){
    com_dateList.push(com_dailyRangeListArr[com_dailyRangeListArr.length - maxSize + iForCom].split(":")[0]);
    com_rangeList.push((parseFloat(com_dailyRangeListArr[com_dailyRangeListArr.length - maxSize + iForCom].split(":")[1])*100).toFixed(2));
    CRL_rangeList.push((parseFloat(compareRangeListArr[compareRangeListArr.length - maxSize + iForCom].split(":")[1])*100).toFixed(2));
}

$(".legend1 em").text(com_title+":");
$(".legend1 b").text(com_fromBeginIncomeRange);
$(".legend2 em").text("上证:");
$(".legend2 b").text(CRL_rangeList[CRL_rangeList.length-1]+"%");

if(maxSize < 20){
    for(var f = 0; f < (20 - maxSize); f++){
        com_dateList.push("-");
        com_rangeList.push("-");
        CRL_rangeList.push("-");
    }
}
console.log(com_dateList + "<br />" + com_rangeList + "<br />" + CRL_rangeList);
//echarts数据填充
var option = {
    color: ['#237ad2','#d4305d'],
    //animation: false,
    tooltip: {
        show: true,
        trigger: 'axis',
        formatter: function(params)
        {
            if(params[0].name != "-"){
                var res = params[0].name + '<br/>';
                for (var i = 0, l = params.length; i < l; i++) {
                    if(params[i].value != "-")
                        res += params[i].seriesName + ': ' + params[i].value + '%<br />';
                    else
                        res += params[i].seriesName + ': <br />';
                }
                return res;
            }
            else{
                return "暂无数据";
            }
        },
        axisPointer: {
            lineStyle:{
                width: 1,
                color: "#f00"
            }
        }
    },
    grid:{
        x: 50,y: 25,x2: 10,y2: 30
    },
    legend: {
        data:['组合','上证']
    },
    xAxis : [{
        type : 'category',
        scale: false,
        boundaryGap: false,
        axisLine: {
            lineStyle:{
                width: 1
            }
        },
        data : com_dateList
    }],
    yAxis : [{
        type : 'value',
        axisLabel : {
            formatter: '{value} %'
        }
    }],
    series : [
        {
            name:"组合",
            type:"line",
            data:com_rangeList
        },
        {
            name:"上证",
            type:"line",
            data:CRL_rangeList
        }
    ]
};
// 为echarts对象加载数据
myChart.setOption(option);

我的json数据是{"2015-10-30":0.0054}格式，用的是百度的echart折线图

追问

能把数据查询的过程和调用Echart一起贴出来吗？？
通过调试，能看到查询后的数据，但是表是空的。多谢

追答

就是一个json格式啊，用ajax取到一个。
{
"2015-10-30":0.0054,
"2015-10-30":0.0054,
"2015-10-30":0.0054,
"2015-10-30":0.0054,
"2015-10-30":0.0054,
"2015-10-30":0.0054,
"2015-10-30":0.0054,
"2015-10-30":0.0054
}
就是类似这样一个json格式的数据，你自己可以设置个固定的测试一下嘛。
我接那个api是内部使用的，有IP限制，你访问不了的