1

3 つの異なる値軸に 3 つの一連のデータを表示する剣道 UI チャートがあります。

「広告の位置」の値の軸は反転され、1 が可能な限り高い値になります (画像のとおり)。Y 軸が反転したグラフ

ご覧のとおり、これにより「Ad Position」シリーズが「トップダウン」でレンダリングされます。

このシリーズを強制的に「ボトムアップ」にレンダリングする方法を知っている人はいますか?たとえば、バーが最低値(4.5)からレンダリングを開始するようにします。

Javascript:

var categories = Array();
var series1 = Array();
var series2 = Array();
var series3 = Array();

// data is populated by parsing a html table
// $chart is passed in as a variable
$chart.kendoChart({                
    theme: "bootstrap",                
    title: {
        text: "Hour of Day Avg. Position"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "line",                    
    },
    series: [{
        data: series1,
        name: "Avg. Ctr",
        tooltip: {
            visible: true,
            template: "#= category #: #= value #%"                        
        },
        axis: "ctr"
    },
    {
        type: "bar",
        data: series2,
        name: "Avg. Position",
        tooltip: {
            visible: true,
            template: "#= category #: #= value # Avg. Pos."
        },
        axis: "adPos"
    },
    {
        data: series3,
        name: "Clicks",
        tooltip:
        {
            visible: true,
            template: "#= category #: #= value # Clicks"
        },
        axis: "clicks"
    }],
    valueAxes: [
    {
        title: { text: "Click Through Rate" },
        name: "ctr",
        labels: {
            visible: true,
            format: "{0}%"
        }
    },
    {
        title: {text: "Clicks per Hour"},
        name: "clicks",
        labels: {
            visible: true,
            format: "{0}"
        }
    },
    {
        title: { text: "Ad Position" },
        name: "adPos",                    
        labels: {
            visible: true,
            format: "{0}"
        },
        min: 1,
        reverse: true
    }],
    categoryAxis: {
        categories: categories,
        labels: {
            rotation: 45
        },
        title: {
            text: "Hour of Day (24Hr)"
        },
        reverse: false,
        axisCrossingValues: [0,30]
    }
    });
4

2 に答える 2

1

Telerik からの直接の回答:

一般に、軸のreverse: trueプロパティは軸の方向を反転するだけで、カテゴリ軸とカテゴリ軸の交点は変更しません。したがって、目的の結果を得るにaxisCrossingValueは、"adPos"値軸の を指定する必要があります。例えば：

$("#chart").kendoChart({
    //....
    valueAxes: [
        //....
    },
    {
        title: { text: "Ad Position" },
        name: "adPos",                   
        //....
        reverse: true,
        axisCrossingValues: 50
    }]
});
于 2012-12-14T01:14:55.377 に答える