Question

我有一个Kendo UI Chart，我在3个不同的值轴上显示3个系列的数据。

“广告位置”值轴反转，1为最高可能值（按图像）。 Chart with inverted Y Axis

正如您所看到的，这会导致“广告位置”系列呈现“自上而下”。

有没有人知道强迫这个系列呈现“自下而上”的方法，例如条形图从最低值（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]
    }
    });

Answer 1

这不受支持，但我可以用隐藏的轴实现类似的功能。它应该在相同的范围内，但在正常方向：

series: [{
   axis: "hidden"
   // ...
}],
valueAxes: [{
  reverse: true,
  min: 1,
  max: 4.5
}, {
  visible: false,
  name: "hidden",
  min: 1,
  max: 4.5
}]

请参阅this jsBin了解有效的演示。

另一种方法是使用烛台系列来模拟范围栏。这个想法是只使用一对值来打开/低和高/关闭。查看演示here。

仍然，专用的范围条形图将是最佳解决方案。随意投票UserVoice。

Answer 2

Direct answer from Telerik:

一般来说，轴的reverse: true属性仅反转轴方向，不会改变两个轴和类别轴的交点。因此，为了获得所需的结果，您应该指定axisCrossingValue值轴的"adPos"。例如：

$("#chart").kendoChart({
    //....
    valueAxes: [
        //....
    },
    {
        title: { text: "Ad Position" },
        name: "adPos",                   
        //....
        reverse: true,
        axisCrossingValues: 50
    }]
});

Kendo UI Chart - 当值轴反转时自上而下渲染条形系列（自上而下）

2 个答案: