kendo 顶部两行图表系列图例

Question

我实现了一个图表，由于屏幕尺寸原因，图例必须位于顶部。我的客户抱怨很难看到（在这种情况下）两个系列的标题。

目前显示是这样的：

[]系列标题1[]系列标题2

我要：

[]系列标题1
[]系列标题2

setting legend.position = "right" 像我想要的那样显示它们，但是在侧面，所以它必须设置为 "top"

有什么方法可以实现吗？

看这里http://plnkr.co/edit/BVPb4AivJuks5VGr6FGz?p=preview

图表配置如下：

{
  "chartArea": {
    "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif",
    "width": 1000,
    "height": 333.3333333333333,
    "background": "",
    "border": {
      "color": ""
    }
  },
  "title": {
    "text": "",
    "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
  },
  "legend": {
    "position": "top"
  },
  "seriesDefaults": {
    "markers": {
      "visible": false
    }
  },
  "series": [
    {
      "type": "column",
      "name": "03-02-2016",
      "data": [
        0.110845970287301,
        0.0914614304545012,
        0.0828538550058511,
        0.0828538550056237,
        0.0897167892449033,
        0.178615728107161,
        0.178615728107161,
        0.178615728107161,
        0.178615728107161,
        0.0727362937236649,
        0,
        0
      ],
      "color": "#8f9b49"
    },
    {
      "type": "line",
      "name": "02-02-2016 (perioden før!)",
      "data": [
        0.110709412367669,
        0.0911219388724476,
        0.0911219388722202,
        0.0911219388724476,
        0.0911219388722202,
        0.0235651458583561,
        0.140159626241029,
        0.140159626241029,
        0.140159626241029,
        0.075608331711237,
        0.899526564965754,
        0.899526564965754,
        0.899526564965754,
        0.687138348237795,
        0.431259248819742,
        0.431259248819742,
        0.431259248819515,
        0.400167587908072,
        0.325565217391159,
        0.325565217391386,
        0.325565217391159,
        0.260910866318909,
        0.110845970287073,
        0.110845970287073
      ],
      "color": "#bdc779",
      "border": {
        "width": 1,
        "color": "#dddddd"
      }
    }
  ],
  "valueAxis": {
    "plotBands": [],
    "title": {
      "text": "kWh",
      "background": "none",
      "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
    },
    "labels": {
      "format": "{0}",
      "font": "12px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
    },
    "line": {
      "visible": false
    },
    "axisCrossingValue": 0
  },
  "categoryAxis": {
    "majorGridLines": {
      "width": 0
    },
    "title": {
      "text": "Time",
      "background": "none",
      "font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
    },
    "categories": [
      "00",
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
      "20",
      "21",
      "22",
      "23"
    ],
    "line": {
      "visible": false
    },
    "labels": {
      "padding": {
        "top": 4
      },
      "font": "12px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
    }
  },
  "tooltip": {
    "visible": true,
    "format": "{0}m2",
    "template": "#= series.name # #= category #: #= value #"
  }
}

Answer 1

根据需要设置图例orientation to vertical and then set the height:

  legend: {
    position: "top",
    orientation: "vertical",
    height: 50    
  },

kendo 顶部两行图表系列图例

kendo chart series legend in top on two lines

charts

kendo-ui

kendo-chart