ZingChart顯示爲數字而不是字符串的X軸標籤

我正在使用ZingChart庫來繪製API調用的結果。當我傳入圖表數據對象的「值」字段的正常數組時，一切正常。然而，當我通過在從Object.keys(titleSet)（其中titleSet是正常Javascript對象）製成的陣列，所述曲線圖顯示如下：ZingChart顯示爲數字而不是字符串的X軸標籤

Example Chart

正如你可以看到，x軸現在用數字標記而不是字符串數組。但是當我打印出Object.keys(titleSet)的結果與正常數組傳遞的結果時，它們在控制檯中看起來都是一樣的。任何人都可以幫我弄清楚我做錯了什麼？

//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, 
    }); 
};

來源

2016-08-14 pomtree

通常，在我們之前和之後發佈圖形配置將非常有用。請發佈您的代碼，以獲得更鞏固的答案。 – nardecky

編輯我的答案，包括我的配置。 – pomtree

完全披露，我是ZingChart團隊的成員。

謝謝你更新你的問題。問題是你在變量chartData之前定義了變量movieSet。在解析頁面時，從上到下，它在創建變量chartData時對空對象執行Object.keys（{}）。你應該直接在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, 
    }); 
};

上述代碼也存在問題。看起來您每次調用此API時都會在圖表上調用渲染。您應該有一個初始的zingchart.render()，然後從那裏使用我們的API。我會建議setdata方法，因爲它會取代全新的JSON數據包或modify方法。

我對你如何處理數據做了一些假設。無論如何，看看下面的演示

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>

如果您在演示中發現，中scaleX.values長度決定有多少節點圖中顯示。如果您將values更改爲labels，則不會發生。

來源

2016-08-15 23:52:00 nardecky

這解決了我的問題。感謝您的幫助和建議，這是我第一次使用ZingCharts :) – pomtree

ZingChart顯示爲數字而不是字符串的X軸標籤

回答

相關問題