在ScatterLine- Kendo-UI中反转Y轴

时间:2015-04-16 22:58:13

标签: javascript kendo-ui

我能够在图表上显示两条散点线。但是,我想扭转Y轴。

即使我实施了以下行,但它根据http://www.telerik.com/forums/valueaxis-change-direction-of-y-axis-reverse

无效
valueAxis: {
   reverse: true,
},

http://jsfiddle.net/3yhbyy2g/3/

1 个答案:

答案 0 :(得分:0)

以下是完整的解决方案和jsfiddle:http://jsfiddle.net/3yhbyy2g/9/

解决方案的关键部分是接近每个轴(x和y)。并将reverse:true添加到y轴。

            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        text: "Path"
                    },


                    tooltip: {
                      visible: true,
                      format: "Value: {0:N0}",
                    },
                 xAxis: {
                    max: 8000,
                    labels: {
                      format: "{0}m"
                  },
                    title: {
                    text: "Meter"
                }
            },
            yAxis: {
                reverse:true,
                labels: {
                    format: "{0}",
                    padding: { 
                     left: 10 
             }   
                },
                title: {
                    text: "Charge"
                }
            },
                    seriesDefaults: {
                        type: "scatterLine",
                    },
                    series: [{
                        name: "Path1",
                        data: stats,
                        markers: {
                        visible: false
                       }
                     }, {
                        name: "Path2",
                        data: stats2,
                        markers: {
                          visible: false
                        }
                    }],

                });
            }

            $(document).ready(createChart);