ScatterLine-Kendo-UI中的反向Y轴 [英] Reverse Y axis in ScatterLine- Kendo-UI

问题描述

我可以在图表上显示两条散点线.但是，我想反转Y轴.

I could able to display two scatter lines on the chart. However, I would like to reverse Y axis.

即使我实现了以下代码，但基于 http://www.telerik.com/forums/valueaxis-change-direction-of-y-axis-reverse

Even though I implemented following line, but it does not work based on the http://www.telerik.com/forums/valueaxis-change-direction-of-y-axis-reverse

valueAxis: {
   reverse: true,
},

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

推荐答案

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

Here is the full solution and jsfiddle:http://jsfiddle.net/3yhbyy2g/9/

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

The key part of the solution is to approach each axis (x and y). and add reverse:true to the y axis.

            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);

这篇关于ScatterLine-Kendo-UI中的反向Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！