Question

我目前正处于个人项目的中间，该项目涉及使用LastFM API创建一个小型网站来显示我的音乐收听习惯的统计数据。

我正在尝试使用C3.js（http://c3js.org/）创建一个简单的条形图，它将显示我最受欢迎的前10名艺术家的游戏数量。

下面是一个JSFiddle函数，它创建条形图并显示我遇到的问题：

http://jsfiddle.net/decodedcreative/pr18wkz6/

＆＃13;

var lastfm = {};

lastfm.tracker = (function(){

	//Set up an object for DOM elements and data source
	var config = {
		getMostPopularArtistsURL: "http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
		user: "jimmersjukebox",
	};


	var setupLastFM = function(){
		createPopularArtistsChart();
	};


	var createPopularArtistsChart = function(){
		$.getJSON(config.getMostPopularArtistsURL,function(data){
			var artistData = data.topartists.artist,
			artists = $.map(artistData, function(artist) {
				return [[artist.name]];
			}),

			playcounts = $.map(artistData, function(playcount) {
				return [[playcount.playcount]];
			});

			playcountsArray = playcounts.slice(0,10);
			artistsArray = artists.slice(0,10);


			var popularArtists = c3.generate({
				bindto: '#popularArtists',
				data: {
					x: 'x',
					columns: [
						['playcount', playcountsArray],
						['x', artistsArray]
					],
					axes: {
						data: 'artists' // ADD
					},
					types: {
						playcount: 'bar'
					}
				},
				axis: {
					x: {
						type: 'category'
					},
				}
			});


		});
	};

	return{
		config: config,
		init: function(){
			setupLastFM();
		}
	};
})();
$(window).load(lastfm.tracker.init);

＆＃13;

/*-- Chart --*/

.c3 svg {
  font: 10px sans-serif;
}
.c3 path, .c3 line {
  fill: none;
  stroke: #000;
}
.c3 text {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;

}
.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

/*-- Axis --*/

.c3-axis-x .tick {
}
.c3-axis-x-label {
}

.c3-axis-y .tick {
}
.c3-axis-y-label {
}

.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}

/*-- Grid --*/

.c3-grid line {
  stroke: #aaa;
}
.c3-grid text {
  fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}

/*-- Text on Chart --*/

.c3-text {
}

.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em;
}

/*-- Line --*/

.c3-line {
  stroke-width: 1px;
}
/*-- Point --*/

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white;
}
.c3-selected-circle {
  fill: white;
  stroke-width: 2px;
}

/*-- Bar --*/

.c3-bar {
  stroke-width: 0;
}
.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

/*-- Arc --*/

.c3-chart-arcs-title {
  font-size: 1.3em;
}

/*-- Focus --*/

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}

/*-- Region --*/

.c3-region {
  fill: steelblue;
  fill-opacity: .1;
}

/*-- Brush --*/

.c3-brush .extent {
  fill-opacity: .1;
}

/*-- Select - Drag --*/

.c3-dragarea {
}

/*-- Legend --*/

.c3-legend-item {
  font-size: 12px;
}

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1
}

/*-- Tooltip --*/

.c3-tooltip {
  border-collapse:collapse;
  border-spacing:0;
  background-color:#fff;
  empty-cells:show;
  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
  opacity: 0.9;
}
.c3-tooltip tr {
  border:1px solid #CCC;
}
.c3-tooltip th {
  background-color: #aaa;
  font-size:14px;
  padding:2px 5px;
  text-align:left;
  color:#FFF;
}
.c3-tooltip td {
  font-size:13px;
  padding: 3px 6px;
  background-color:#fff;
  border-left:1px dotted #999;
}
.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}
.c3-tooltip td.value{
  text-align: right;
}

.c3-area {
  stroke-width: 0;
  opacity: 0.2;
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777;
}

.c3-chart-arc .c3-gauge-value {
  fill: #000;
  font-size: 28px;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">       
            <div class="chart-container">
                <div id="popularArtists"></div>
            </div>
        </div>

＆＃13;

条形图当前未按预期呈现。我相信这是因为用于x轴上的标签和条形高度本身的数据数组是JSON对象数组而不是字符串数组。

如果有人知道如何将JSON对象数组转换为字符串数组，或者只是给出一个使用带有JSON数据的C3的例子。

由于

詹姆斯

Answer 1

Updated JSFiddle here.

我刚才有同样的问题！问题在于你实际上是在使用嵌套数组来尝试填充图表，而C3 （可能还有D3）？不喜欢 - - 它只需要一个没有子阵列的阵列。 artistsArray已经是一个数组，列声明['data1', artistsArray]也是一个数组，如括号所示，因此变为['data1', [3, 5, 4]]。您的数据点成为声明中的第二个数组，C3不知道如何处理它。

要解决此问题，您创建playcountsArray和artistsArray需要额外的步骤：

// Create the initial array of our datapoints.
    playcountsArray = playcounts.slice(0,10);
    artistsArray = artists.slice(0,10);

// Add the name of the column to the front of the array.
    playcountsArray.unshift('playcount');
    artistsArray.unshift('x');

现在，不是包含所有数据点和类别且没有列名（[3, 5, 4]）的数组，而是在前面得到了列名，就像普通的C3列声明所希望的那样（{{ 1}}）。然后，在图表创建中，您只需传入数组：

['data1', 3, 5, 4]

请注意，我们并没有像通常那样将各个列声明包装在括号中。我们只是传递数组的名称。如果我们确实使用了括号，我们基本上会说columns: [ playcountsArray, artistsArray ],，将我们的数组嵌套在另一个数组中，正如我们现在知道的那样，C3会把我们嚼掉，哈哈。

将JSON Object数组转换为字符串数组以与C3.js图表库一起使用

1 个答案:

将JSON Object数组转换为字符串数组以与C3.js图表​​库一起使用

1 个答案:

将JSON Object数组转换为字符串数组以与C3.js图表库一起使用