ZingChart文字列の代わりに数値として表示されるX軸ラベル

私はZingChartライブラリを使用して、API呼び出しの結果をグラフ化しています。グラフデータオブジェクトの「値」フィールドの通常の配列を渡すと、すべて正常に動作します。私は（titleSetが通常のJavaScriptオブジェクトである）Object.keys(titleSet)から製造された配列を渡すときただし、グラフが表示され、次のように：あなたが見ることができるように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の前に定義したことです。ページを解析する際に、変数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を使用してください。私はそれが全く新しいJSONパケットまたはmodifyメソッドを置き換えるのでsetdataメソッドを提案するでしょう。

データをどのように扱っているかについていくつかの仮定をしています。デモに気づいた場合にかかわらず、次のデモ

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軸ラベル

答えて

関連する問題