时间戳

首页 > 解决方案 > Json数据图表

jquery - Json数据图表

问题描述

在我的 Web 应用程序中，我有一个 echart 图表和一个返回的 URL

[ { "category": "2019-01-06 21:22:56", "value1": 0.5 }, { 
"category": "2019-01-06 21:24:57", "value1": 0.5 }, { "category": 
"2019-01-08 22:09:52", "value1": 533 }, { "category": "2019-01-08 
22:10:45", "value1": -100 }, { "category": "2019-01-08 22:11:35", 
"value1": 216.5 }, { "category": "2019-01-08 22:12:25", "value1": 
-221.5 }, { "category": "2019-01-08 22:13:16", "value1": 226 } ]

现在我想在 x 轴上显示“类别”值，在 y 轴上显示“value1”值。

图表代码如下：

var dataArr = [];
        $.get('https://myurl.com/backend/data.php', {}, 
function(response) {
            dataArr = JSON.parse(response);
            initEchart();
        });

var myChart = echarts.init(document.getElementById('main'));

function initEchart(){
            // specify chart configuration item and data
            var option = {
                title: {
                    text: 'ECharts entry example'
                },
                tooltip: {},
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: dataArr.category 
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'line',
                    data: dataArr.value1
                }]
            };

            // use configuration item and data specified to show 
chart
            myChart.setOption(option);
        }
}

标签： jqueryjsonajaxecharts

解决方案

你需要使用这样的东西

function(response) {
        dataArr = JSON.parse(response);
        initEchart();
        var category = [];
        var value = [];
        for(var i = 0; i < dataArr.length; i++) {
           var item = dataArr[i];   
           category.push("\""+item[0]+"\"");
           value.push("\""+item[1]+"\"");
       }
       category= '['+category+']';
       var result_category = category.toString();

       value= '['+value+']';
       var result_value = value.toString();


      //and in chart use like this 

       xAxis: {
                data:  JSON.parse(result_category)
            },
        series: [{
                    name: 'Sales',
                    type: 'line',
                    data: JSON.parse(result_value)
                }]
});

推荐阅读