ホームページ > ウェブフロントエンド > jsチュートリアル > Ajaxで取得したデータがechartsで表示されない原因の分析と解決策

Ajaxで取得したデータがechartsで表示されない原因の分析と解決策

亚连
リリース: 2018-05-24 11:25:50
オリジナル
3201 人が閲覧しました

echarts マップの使用が必要なプロジェクトに取り組んでいるとき、ajax を介してバックグラウンドから提供されるデータを正常に取得し、目的の JSON 文字列を生成しました。ただし、echartsのoption.series[0].dataに配置するとデータは取得できません。生成されたマップの背景から取得した値は表示されません。必要な友人はそれを参照してください。私は echarts マップの使用を必要とするプロジェクトに取り組んでいたとき、バックグラウンドで提供されたデータが ajax 経由で正常に取得され、必要な JSON 文字列が生成されます。ただし、echartsのoption.series[0].dataに配置するとデータは取得できません。背景から取得した値は、生成されたマップ上では見ることができません。 Baidu や Bing で検索したところ、さまざまな回答が得られましたが、最終的には問題は解決されませんでした。専門家である同僚が解決したので、皆さんと共有したいと思います。皆さんのお役に立てれば幸いです、、、、、

これ以上ナンセンスはなく、直接コーディングするだけです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

$(function () {

var data = [];

function setOption(data){

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

//window.onresize = myChart.resize;

var option = {

title : {

text: '全国...分布图',

// subtext: '纯属虚构',

x:'left'

},

tooltip : {

trigger: 'item'

},

// legend: {

// orient: 'vertical',

// x:'left',

// data:['iphone3','iphone4','iphone5']

// },

dataRange: {

min: 0,

max: 10,

x: 'left',

y: 'bottom',

text:['高','低'], // 文本,默认为数值文本

color:['#ff5e5e', '#ffa25e', '#ffd05e','#fce6b2','#e1dbcd'],

calculable : true

},

// toolbox: {

// show: true,

// orient : 'vertical',

// x: 'right',

// y: 'center',

// feature : {

// mark : {show: true},

// dataView : {show: true, readOnly: false},

// restore : {show: true},

// saveAsImage : {show: true}

// }

// },

// roamController: {

// show: true,

// x: 'right',

// mapTypeControl: {

// 'china': true

// }

// },

series : [

{

name: '...',

type: 'map',

mapType: 'china',

roam: false,

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

},

data:data

}

]

};

myChart.setOption(option);

//$.getJSON('HotspotServlet',function(data){

//option.series[0].data=data.result;

// 为echarts对象加载数据

//myChart.setOption(option);

//});

}

//获取...排行数据

function getMapData(limit){

$.ajax({

url:'http://127.0.0.1/api/adminunit/score/top/'+limit,

type:'post',

dataType:'JSON',

success:function(objdata){

//var str = JSON.parse(objdata);

for(var i = 0;i < objdata.length;i ++){

var dId = parseInt(objdata[i].id);

//var dName="天津市";

//if(dId==1){

// dName="北京市";

//}

var dName = objdata[i].name;

var dScore = parseInt(objdata[i].score);

var oneData = {};

var oneData = {id:dId,name:dName,value:dScore};

data.push(oneData);

}

console.log(data);

//option.series[0].data=data;

setOption(data);//执行setOption函数。传参

}

});

}

getMapData(2);

});

ログイン後にコピー

最も重要なことは、バックグラウンドから取得されたデータがパラメーター転送の形式で echart に入れられることです。

私がそれを行ったとき、パラメータを渡さなかったので、echartsで取得されたデータは常に空でした。

上記は私があなたのためにまとめたものです。

関連記事:

Ajax 投稿リクエストのジャンプ ページ

Ajax 送信フォーム ページがすぐに更新される

Ajax が新しいウィンドウを開いてブラウザーによってブロックされる場合の 2 つの解決策

以上がAjaxで取得したデータがechartsで表示されない原因の分析と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート