Nhãn trục ZingChart hiển thị dưới dạng số thay vì chuỗi

Tôi đang sử dụng thư viện ZingChart để vẽ đồ thị kết quả từ cuộc gọi API. Khi tôi vượt qua trong một mảng bình thường cho trường "giá trị" của đối tượng dữ liệu biểu đồ, mọi thứ hoạt động tốt. Tuy nhiên, khi tôi vượt qua trong một mảng làm từ Object.keys(titleSet) (nơi titleSet là một đối tượng javascript bình thường), biểu đồ hiển thị như sau:Nhãn trục ZingChart hiển thị dưới dạng số thay vì chuỗi

Example Chart

Như bạn thấy, trục x hiện dán nhãn với số thay vì mảng chuỗi. Nhưng khi tôi in kết quả của Object.keys(titleSet) so với truyền trong một mảng bình thường, cả hai đều xuất hiện giống nhau trong bảng điều khiển. Bất cứ ai có thể giúp tôi tìm ra những gì tôi đang làm sai?

//List of movies inputted by the user 
var movieList = []; 
var movieSet = {}; 

var IMDBData = { 
    "values": [], 
    "text": "IMDB", 
}; 
var metascoreData = { 
    "values": [], 
    "text": "Metascore" 
}; 
var RTMData = { 
    "values": [], 
    "text": "Rotten Tomatoes Meter" 
}; 
var RTUData = { 
    "values": [], 
    "text": "Rotten Tomatoes User" 
}; 

var chartData = { 
    "type":"bar", 
    "legend":{ 
    "adjust-layout": true 
    }, 
    "plotarea": { 
    "adjust-layout":true 
    }, 
    "plot":{ 
    "stacked": true, 
    "border-radius": "1px", 
    "tooltip": { 
     "text": "Rated %v by %plot-text" 
    }, 
    "animation":{ 
     "effect":"11", 
     "method":"3", 
     "sequence":"ANIMATION_BY_PLOT_AND_NODE", 
     "speed":10 
    } 
    }, 
    "scale-x": { 
    "label":{ /* Scale Title */ 
     "text":"Movie Title", 
    }, 
    "values": Object.keys(movieSet) /* Needs to be list of movie titles */ 
    }, 
    "scale-y": { 
    "label":{ /* Scale Title */ 
     "text":"Total Score", 
    } 
    }, 
    "series":[metascoreData, IMDBData, RTUData, RTMData] 
}; 


var callback = function(data) 
{ 
    var resp = JSON.parse(data); 

    movieSet[resp.Title] = true; 

    //Render 
    zingchart.render({ 
    id:'chartDiv', 
    data:chartData, 
    }); 
};

Nguồn

2016-08-14 pomtree

Thông thường sẽ rất hữu ích nếu chúng tôi đăng cấu hình biểu đồ trước và sau. Vui lòng đăng mã của bạn để nhận được câu trả lời kiên cố hơn. – nardecky

Đã chỉnh sửa câu trả lời của tôi để bao gồm cấu hình của tôi. – pomtree

Tiết lộ đầy đủ, tôi là thành viên của nhóm ZingChart.

Cảm ơn bạn đã cập nhật câu hỏi của mình. Vấn đề là bạn đã xác định biến của mình movieSet trước biến số chartData. Khi phân tích trang, từ trên xuống, nó đang thực hiện Object.keys ({}) trên một đối tượng trống khi tạo biến chartData. Bạn chỉ nên trực tiếp gán nó vào cấu hình của bạn sau này trên chartData['scale-x']['values'] = Object.keys(moviSet).

var callback = function(data) 
{ 
    var resp = JSON.parse(data); 

    movieSet[resp.Title] = true; 

    //Render 
    zingchart.render({ 
    id:'chartDiv', 
    data:chartData, 
    }); 
};

Có sự cố với mã ở trên. Có vẻ như bạn đang gọi hiển thị trên biểu đồ mỗi khi bạn gọi API này. Bạn nên có một số zingchart.render() ban đầu và sau đó từ đó trở đi sử dụng số API của chúng tôi. Tôi sẽ đề nghị phương pháp setdata vì nó thay thế một gói JSON hoàn toàn mới hoặc phương thức modify.

Tôi đang đưa ra một số giả định về cách bạn xử lý dữ liệu. Bất kể, hãy kiểm tra các bản demo sau

var movieValues = {}; 
 

 
var myConfig = { 
 
    \t type: "bar", 
 
    \t scaleX:{ 
 
    \t values:[] 
 
    \t }, 
 
\t series : [ 
 
\t \t { 
 
\t \t \t values : [35,42,67,89,25,34,67,85] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 300, 
 
\t width: '100%' 
 
}); 
 

 
var callback = function(data) { 
 
    movieValues[data.title] = true; 
 
    myConfig.scaleX.values = Object.keys(movieValues); 
 
    zingchart.exec('myChart', 'setdata', { 
 
    data:myConfig 
 
    }) 
 
} 
 

 
var index = 0; 
 
var movieNamesFromDB = ['Sausage Party', 'Animal House', 'Hot Rod', 'Blazing Saddles']; 
 
setInterval(function() { 
 
    if (index < 4) { 
 
    callback({title:movieNamesFromDB[index++]}); 
 
    } 
 
},1000)

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
</script> 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

Nếu bạn nhận thấy trong bản demo, chiều dài của scaleX.values xác định có bao nhiêu nút được hiển thị trên đồ thị. Nếu bạn thay đổi values thành labels điều này sẽ không xảy ra.

Nguồn

2016-08-15 23:52:00 nardecky

Điều đó đã khắc phục được sự cố của tôi. Cảm ơn sự giúp đỡ và lời khuyên, đây là lần đầu tiên tôi sử dụng ZingCharts :) – pomtree

Nhãn trục ZingChart hiển thị dưới dạng số thay vì chuỗi

Trả lời

Các vấn đề liên quan