将 JSON 对象数组转换为字符串数组以用于 C3.js 图表库答案

【问题标题】：Converting a JSON Object array to string array for use with C3.js chart library将 JSON 对象数组转换为字符串数组以用于 C3.js 图表库
【发布时间】：2014-10-13 13:08:24
【问题描述】：

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

我正在尝试使用 C3.js (http://c3js.org/) 创建一个简单的条形图，它将显示我的前 10 名最常听的艺术家的播放次数。

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

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

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);

/*-- 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;
}

<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>

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

如果有人知道我如何将 JSON 对象数组转换为字符串数组，或者可以举一个将 C3 与 JSON 数据结合使用的示例，那就太好了。

谢谢

詹姆斯

【问题讨论】：

你能发布一个 JSON 数据的例子吗？因为您应该能够仅使用 JSON 数据使用 C3 呈现图表。另外，您是否包含了 D3 库？
嗨 RemarkLima。我已经编辑了原始问题以显示数据的格式。每个数组基本上是一个 JSON 对象数组，每个对象中有一个属性 - 值对。是的，包括 D3 库。

标签： javascript json c3.js

【解决方案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 列声明所希望的那样 (['data1', 3, 5, 4]) .然后，在您的图表创建中，您只需传入您的数组：

columns: [
    playcountsArray,
    artistsArray
],

请注意，我们没有像往常那样将各个列声明括在括号中。我们只是传入数组的名称。如果我们确实使用了括号，我们基本上会说[['x', 3, 5, 4]]，将我们的数组嵌套在另一个数组中，正如我们现在所知，C3 会咬我们，哈哈。

【讨论】：