Question

我有一个图表，我想显示两个垂直轴：酒和＆的百分比值。一个月内的药物。图表显示药物和酒精的列，通过将它们链接到值字段，但它不显示百分比。我希望图表显示药物和酒精的每个月的值和百分比。

以下是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>

Answer 1

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

具有多个垂直轴的剑道条形图

1 个答案: