jquery - 具有多个数据和各个数据点作为图例的堆叠条形图

Question

我正在尝试创建一个堆积条形图。 x 上的每个标签都有不同的堆叠数据点。有些数据点在 x 轴上重叠，有些数据点仅对于特定标签是唯一的。
我尝试在融合图表( http://jsfiddle.net/fu2pprmk/ )和 d3 js 中。我在 d3.js 中遇到的最接近的( http://jsfiddle.net/wz1cwrLL/ ) 当我尝试在缺少数据点的情况下实现它时，出现错误

Error: attribute y: Expected length, "NaN".

Error: attribute height: Expected length, "NaN".

看来我需要检查缺失值。对 d3js 完全不了解。任何输入都有帮助。

我的数据示例就在这个 fiddle 中。

http://jsfiddle.net/wz1cwrLL/1/

或者，这可以在 rCharts 中实现吗？

Answer 1

上面使用 FusionCharts“stackedcolumn2d”图表提供的 fiddle 在各个数据对象中定义了“颜色”属性，用于设置数据图颜色。

每个图例代表每个数据集系列。因此，为该系列设置的颜色将反射(reflect)在该系列的图例中。为此，您需要在数据集级别设置“颜色”属性。

请注意:图例不能代表单个数据图。

请引用这里的 fiddle :http://jsfiddle.net/Akash008/dty7dfzk/4/

FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
  "chart": {
    "caption": "Revenue split by product category",
    "subCaption": "For current year",
    "xAxisname": "Quarter",
    "yAxisName": "Revenues (In USD)",
    //"paletteColors": "#FF0000,#00FF00,#0000FF,#FFFF00",
    "showSum": "1",
    "numberPrefix": "$",
    "showLegend": "1",
    "theme": "fint",
    "legendPosition": "right",
    "legendCaption": "food Items",
    "legendScrollBgColor": "#cccccc",
    "legendScrollBarColor": "#999999",
    "plotHighlightEffect": "fadeout",
  },

  "categories": [{
    "category": [{
      "label": "Non-dairy Product"
    }, {
      "label": "Vegetables"
    }, {
      "label": "Fruits"
    }, {
      "label": "Vegetables"
    }]
  }],

  "dataset": [{
    "seriesname": "Food Products",
    "color": "#FF0000",
    "data": [{
      "toolText": "Egg",
      "value": "11000"
    }, {
      "toolText": "Potato",
      "value": "15000"
    }, {
      "toolText": "Apple",
      "value": "13500"
    }, {
      "toolText": "lettuce",
      "value": "15000"
    }]
  }, {
    "seriesname": "Non-Food Products",
    "color": "#00FF00",
    "data": [{
      "toolText": "Meat",
      "value": "11400"
    }, {
      "toolText": "Eggplant",
      "value": "14800"
    }, {
      "toolText": "Oranges",
      "value": "8300"
    }, {
      "toolText": "cilantro",
      "value": "11800"
    }]
  }, {
    "seriesname": "Non-Food Products",
    "color": "#0000FF",
    "data": [{
      "toolText": "Fish",
      "value": "11400"
    }, {
      "toolText": "Carrot",
      "value": "14800"
    }, {
      "toolText": "plums",
      "value": "8300"
    }, {
      "toolText": "Kale",
      "value": "11800"
    }]
  }, {
    "seriesname": "Non-Food Products",
    "color": "#FFFF00",
    "data": [{
      "toolText": "Fish",
      "value": "11400"
    }, {
      "toolText": "Carrot",
      "value": "14800"
    }, {
      "toolText": "plums",
      "value": "8300"
    }, {
      "toolText": "Kale",
      "value": "11800"
    }]
  }],
}
})
    revenueChart.render();
});

您还可以通过设置图表级别属性“paletteColors”来一次性设置所有系列的颜色来实现相同的效果。引用 fiddle :http://jsfiddle.net/Akash008/dty7dfzk/3/

FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
  "chart": {
    "caption": "Revenue split by product category",
    "subCaption": "For current year",
    "xAxisname": "Quarter",
    "yAxisName": "Revenues (In USD)",
    "paletteColors": "#FF0000,#00FF00,#0000FF,#FFFF00",
    "showSum": "1",
    "numberPrefix": "$",
    "showLegend": "1",
    "theme": "fint",
    "legendPosition": "right",
    "legendCaption": "food Items",
    "legendScrollBgColor": "#cccccc",
    "legendScrollBarColor": "#999999",
    "plotHighlightEffect": "fadeout",
  },

  "categories": [{
    "category": [{
      "label": "Non-dairy Product"
    }, {
      "label": "Vegetables"
    }, {
      "label": "Fruits"
    }, {
      "label": "Vegetables"
    }]
  }],

  "dataset": [{
    "seriesname": "Food Products",
    "data": [{
      "toolText": "Egg",
      "value": "11000"
    }, {
      "toolText": "Potato",
      "value": "15000"
    }, {
      "toolText": "Apple",
      "value": "13500"
    }, {
      "toolText": "lettuce",
      "value": "15000"
    }]
  }, {
    "seriesname": "Non-Food Products",
    "data": [{
      "toolText": "Meat",
      "value": "11400"
    }, {
      "toolText": "Eggplant",
      "value": "14800"
    }, {
      "toolText": "Oranges",
      "value": "8300"
    }, {
      "toolText": "cilantro",
      "value": "11800"
    }]
  }, {
    "seriesname": "Non-Food Products",
    "data": [{
      "toolText": "Fish",
      "value": "11400"
    }, {
      "toolText": "Carrot",
      "value": "14800"
    }, {
      "toolText": "plums",
      "value": "8300"
    }, {
      "toolText": "Kale",
      "value": "11800"
    }]
  }, {
    "seriesname": "Non-Food Products",
    "data": [{
      "toolText": "Fish",
      "value": "11400"
    }, {
      "toolText": "Carrot",
      "value": "14800"
    }, {
      "toolText": "plums",
      "value": "8300"
    }, {
      "toolText": "Kale",
      "value": "11800"
    }]
  }],


}
  })
  revenueChart.render();
});

希望这有帮助。