javascript - 具有多个垂直轴的Kendo条形图

我有一个图表，其中我想显示两个垂直轴：给定月份中酒精和药物的价值和百分比。该图通过将药物和酒精列链接到值字段来显示它们，但未显示百分比。我希望图表显示药物和酒精每月的价值和百分比。

这是Fiddle

的HTML

<div id = "parentDiv"></div>

Java脚本

var sharedDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, value: 10, seriesTitle:"Alcohol", percentValue: 33, item: "Apr 15", ServiceName:"Test1" },
        { id: 2, value: 20, seriesTitle:"Drug", percentValue: 67, item: "Apr 15",ServiceName:"Test1" },
        { id: 3, value: 10, seriesTitle:"Alcohol", percentValue: 50, item: "May 15",ServiceName:"Test1" },
        { id: 4, value: 10, seriesTitle:"Drug", percentValue: 50, item: "May 15",ServiceName:"Test1" }
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number", editable: false },
                value: { type: "number" },
                seriesTitle: { type: "string" },
                percentValue: { type: "number" },
                item: { type: "string" },
                ServiceName: { type: "string" }
            }
        }
    },
    sort: [
                { field: "ServiceName", dir: "asc" }

          ],
    group: [
                { field: "seriesTitle" }
            ]
});

createChart();
function createChart()
{
$("#parentDiv").kendoChart({
    dataSource: sharedDataSource,
    autoBind: false,
    legend: {
            position: "top"
        },
    chartArea:{
        width:200,
        height:140},
      valueAxis: [{
          //min: 100,
            field: "value"
        }
                  ,
                  {
                      labels: {
                format: "{0}%"
            },
          //min: 100,
          //max: 100,
                     // name; "percentValue"
            field: "percentValue"
        }
       ],

    categoryAxis: {
        field: "item"
    },
    series: [
        { field: "value" }
    ]
});
}
sharedDataSource.read();

外部资源

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>

最佳答案

我试图从一个系列创建多轴，Telerik支持人员说不支持此行为。他们建议将百分比值显示为单独的系列或作为值系列的标签。