0

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

这是小提琴

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>
4

1 回答 1

1

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

于 2015-06-19T19:33:59.720 回答