Question

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

错误：属性y：预期长度，＆＃34; NaN＆＃34;。

错误：属性高度：预期长度，＆＃34; NaN＆＃34;。

看起来我需要检查缺失的值。根本不知道d3js。任何输入都是有帮助的。

我的数据示例就是这个小提琴。

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

或者，这可以在rCharts？

中实现

Answer 1

上面提供的小提琴使用FusionCharts＆＃34; stackedcolumn2d＆＃34;图表，有＆＃34;颜色＆＃34;在各个数据对象中定义的属性，用于设置数据图颜色。

每个图例代表每个数据集系列。因此，为该系列设置的颜色将反映在该系列的图例中。为此你需要设置＆＃34;颜色＆＃34;数据集级别的属性。

请注意：图例不能代表个别数据图。

请参阅此处的小提琴：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();
});

您也可以通过设置图表级别属性＆＃34; paletteColors＆＃34;来实现相同的目标。一次性设置所有系列的颜色。请参阅小提琴：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();
});

希望这有帮助。

Answer 2

2007年Y轴上堆放的项目数与其他年份不一致。这是一个工作小提琴

http://jsfiddle.net/mwvhhe3o/

在您的小提琴中所示的最简单的形式中，数据数组中的每个对象必须具有相同数量的成员。

{ year: "2006", redDelicious: "0", mcintosh: "15", oranges: "9", pears: "6",  melons:"0", plum:"0", grapes:"0", cherries:"0" }

您不能拥有以下

{ year: "2006", redDelicious: "0", mcintosh: "15", oranges: "9", pears: "6",  melons:"0", plum:"0", grapes:"0", cherries:"0" }

因此，在这里将相同的原理应用于您的数据示例是我将如何做到的。

var data =  [                                           
{   Gene: "KRAS", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 17, Gly12Val: 12, Gly12Asp: 9, Gly13Asp: 5, Val600Glu: 0 , Arg273His: 0, His1047Arg: 0, Glu69: 0}
{   Gene: "BRAF", Leu858Arg: 0, Thr790Met: 0, Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 13 , Arg273His: 0, His1047Arg: 0, Glu69: 0 }
{   Gene: "EGFR", Leu858Arg: 8, Thr790Met: 5,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0 , Arg273His: 0, His1047Arg: 0, Glu69: 0   }
{   Gene: "TP53", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0 , Arg273His: 6 , His1047Arg: 0, Glu69: 0  }
{   Gene: "PIK3CA", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0 , Arg273His: 0, His1047Arg: 4 , Glu69: 0    }
{   Gene: "CDKN2A", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0, Arg273His: 0, His1047Arg: 0, Glu69: 4  }
];

希望有所帮助。

带有多个数据和相应数据点的堆积条形图作为图例

2 个答案: