2

各棒の色が異なる横棒グラフを作成しようとしています。シリーズデータとして以下を入力しようとしました：

試行 1. これにより、すべてのバーが正常に表示されましたが、各グラフの色は常に同じでした (seriesColors 配列の最初の色)。

series: [value1, value2, value3, ...],
seriesColors: [hex1, hex2, hex3, ...]
categoryAxis: [name1, name2, name3, ...],

試行 2. これにより、すべての色が正しくなり、表示されるデータは問題ありませんでした。問題は、値が「0」の他のバーに必要なスペースを収容するために、各バーが非常に細いことでした。

series: [{
    type: "bar",
    data: [value1, 0, 0, 0, 0, 0],
    color: "#hex1"
},{
    type: "bar",
    data: [0, value2, 0, 0, 0, 0],
    color: "#hex2"
}...etc...],
categoryAxis: [name1, name2, name3, ...];

試行 3. これは単純に壊れていました。

    series: [{
    type: "bar",
    data: value1,
    color: "#hex1"
},{
    type: "bar",
    data: value1,
    color: "#hex2"
}...etc...],
categoryAxis: [name1, name2, name3, ...];

試行 4: これは正しいサイズと正しい色でバーを表示しますが、カテゴリ軸には (予想どおり) カテゴリ名はありません。

series: [{
    name: name1,
    data: value1,
    color: hex1
},
{
    name: name2,
    data: value2,
    color: hex2
}...etc...];
4

1 に答える 1

0

各データ項目のcolorFieldプロパティの値を指定することを検討してください。例えば：

$("#chart").kendoChart({
  series: [{
    colorField: "valueColor",
    data: [
      { value: 1, valueColor: "blue" },
      { value: 2, valueColor: "green" },
      { value: 3, valueColor: "#BADA55" },
      { value: 3, valueColor: "rgba(125, 125, 125, 0.2)" }
    ]
  }],
  seriesDefaults: {
    type: "bar"
  }
});
于 2015-02-23T21:46:54.820 に答える