私は新しいので、これについてあなたの助けが必要です。json データを使用して Basic Bar 反転軸を作成したいと考えています。Bar Inverted Axesのようになります が、どういうわけかチャートが表示されません。私はAngularを使用してWebアプリを構築しています。これは私のコントローラーです
.controller("JsonCtrl", function ($scope, $http,$location, chartBar) {
$scope.data1 = {};
$http.get('data/set.json')
.success(function (data1) {
var axis1 = [],seriesa = [],seriesb = [], seriesc = [], seriesd = [], seriese = [] ;
data1.forEach(function(row) {
axis1.push(row.data1);
seriesa.push(row.data2);
seriesb.push(row.data3);
seriesc.push(row.data4);
seriesd.push(row.data5);
seriese.push(row.data6);
});
$scope.data1.a=axis1;
$scope.data1.b=seriesa;
$scope.data1.c=seriesb;
$scope.data1.d=seriesc;
$scope.data1.e=seriesd;
$scope.data1.f=seriese;
/**/
console.log($scope.data1);
var c = chartBar('mainb',$scope.data1);
//windows responsive
window.onresize=function ()
{
c.resize()
}
//
})
.error(function (error) {
$scope.data.error = error;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-xs-12 col-sm-12 widget-container-col">
<div class="widget-box">
<div class="widget-header">
<h5 class="widget-title">Barca (Bar Chart)</h5>
<div class="widget-toolbar">
<a href="#" data-action="fullscreen" class="orange2">
<i class="ace-icon fa fa-expand"></i>
</a>
<a href="#" data-action="collapse">
<i class="ace-icon fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-main">
<div id="mainb" style="height:250px;"></div>
</div>
</div>
</div>
</div>
</div>
ここでjsonデータ:
{
"data1": ["Smtra", "Jawa", "Klmtn", "Sulwsi", "Maluku"]
"data2": [149739, 244347, 54462, 59869, 6713],
"data3": [150089, 223519, 49523, 58881, 6152],
"data4": [141625, 200745, 46966, 54637, 6733],
"data5": [120428, 173979, 42208, 45067, 6034],
"data6": [114254, 164168, 39415, 38750, 5301]
}
そして、これはチャートを構築するファクトリです:
.factory('chartBar',function(echartTheme){
return function(element, data1){
var echartBar = echarts.init(document.getElementById(element), echartTheme);
echartBar.setOption({
title: {
text: 'Bar Graph',
subtext: 'Bar'
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 100,
data: ['2010', '2011', '2012', '2013', '2014']
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
calculable: true,
xAxis: [{
type: 'value',
boundaryGap: [0, 0.01]
}],
yAxis: [{
type: 'category',
data: data1.a
}],
series: [{
name: '2010',
type: 'bar',
data: data1.b
}, {
name: '2011',
type: 'bar',
data: data1.c
}, {
name: '2012',
type: 'bar',
data: data1.d
}, {
name: '2013',
type: 'bar',
data: data1.e
}, {
name: '2014',
type: 'bar',
data: data1.f
}]
});
}
})