Question

我正在使用带有两个valueAxes的剑道图。

一个valueAxis是所有正值
其他可以有负面

图表中定义的范围基于值。我希望valueAxis都有值＆＃34; 0＆＃34; as axisCrossingValue。

我用axisCrossingValue尝试了这个，但它不尊重第二个值的这个值。

var data1 = [6000, 8000];
var data2 = [0.2, -0.3] ;
$scope.chartOptions = {
    transitions: false,
    legend: {
        visible: false
    },
    chartArea:
    {
        margin: {
            left: 20,
            right: 20
        },
        background: "transparent"
    },
    seriesDefaults: {
        type: "column"
    },
    series: [
        {
            type: "column",
            stack: true,
            name: "A",
            color: "#efefef",
            axis: "A",
            highlight: {
                visible: false
            },
            data: data1
        }, {
            type: "line",
            name: "B",
            color: "#008700",
            axis: "B",
            style: "smooth",
            markers: {
                visible: false,
                border: {
                    width: 0
                }
            },
            data: data2
        }
    ],
    valueAxes: [
        {
            name: "A",
            labels: {
                visible: true,
                template: "#= kendo.format('{0:n}', value) #",
                color: "#888"
            },
            axisCrossingValue: 0
        }, {
            name: "B",
            labels: {
                visible: true,
                justified: true,
                template: "#= value #",
                color: "#888"

            },
            axisCrossingValue: 0
        }
    ],
    categoryAxis: {
        labels: {
            visible: false
        },
        categories: $scope.dates,
        axisCrossingValues: [0, $scope.dates.length]
    },
    tooltip: {

    }
};

Answer 1

看起来图表不知道如何在两个轴上自动处理0处的交叉。我认为最好的办法是计算/设置2轴的最小值和最大值，使得0在两个轴上的位置相同：

  valueAxis: [
    {
      name: "A", 
      axisCrossingValue: 0,
      min: -9000,
      max: 9000,
      color: "#888",
      majorGridLines: {
        visible: false,
      }
    }, 
    {
      name: "B", 
      min: -0.5,
      max: 0.5,
      justified: true,
      color: "#888",
      majorGridLines: {
        visible: false,
      }    
    }
  ],

<强> DEMO

Answer 2

要动态执行此操作，我必须使用根据我的数据集计算的舍入值覆盖每个轴的默认最大/最小值。

    $scope.getChartMaxMin(values, percentages) {

            var minValue = 0;
            var maxValue = 0;    
            var minPercent = 0;
            var maxPercent = 0;

            angular.forEach(values, function (val) {    
                if (val < minValue) {
                    minValue = val;
                }
                if (val > maxValue) {
                    maxValue = val;
                }
            })

            angular.forEach(percentages, function (percent) {
                percent = percent * 100;    
                if (percent < minPercent) {
                    minPercent = percent;
                }
                if (percent > maxPercent) {
                    maxPercent = percent;
                }
            })

            minValue = intelliRound(Math.floor(minValue));
            maxValue = intelliRound(Math.ceil(maxValue));    
            minPercent = intelliRound(Math.floor(minPercent));
            maxPercent = intelliRound(Math.ceil(maxPercent));

            var difference = maxValue / maxPercent;
            minPercent = minValue / difference;    

            return {
                minValue: minValue,
                maxValue: maxValue,
                minPercent: minPercent,
                maxPercent: maxPercent
            }   
        }
        function intelliRound(num) {
            var len = (num + '').length;
            var result = 0;
            if (num < 0) {
                var fac = Math.pow(10, len - 2); 
                result = Math.floor(num / fac) * fac;
            }
            else {
                var fac = Math.pow(10, len - 1);
                result = Math.ceil(num / fac) * fac;
            }
            return result;
        }

        var values = [40000, 60000, -30000]    
        var percentages = [3.65,0.010,1.69]    
        var maxMin = $scope.getChartMaxMin(values, percentages);    

    $scope.chartOptions = {   

        series: [
            {
                type: "column",
                stack: true,
                name: "A",
                color: "#efefef",
                axis: "A",
                highlight: {
                    visible: false
                },
                data: values
            }, {
                type: "line",
                name: "B",
                color: "#008700",
                axis: "B",
                style: "smooth",
                markers: {
                    visible: false,
                    border: {
                        width: 0
                    }
                },
                data: percentages
            }
        ],
        valueAxes: [
            {
                name: "A",
                labels: {
                    visible: true,
                    template: "#= kendo.format('{0:n}', value) #",
                    color: "#888"
                    min: maxMin[minValue],
                    max: maxMin[maxValue] 
                },
            }, {
                name: "B",
                labels: {
                    visible: true,
                    justified: true,
                    template: "#= value #",
                    color: "#888"
                }, 
                min: maxMin[minPercent],
                max: maxMin[maxPercent]           
            }
        ],
        categoryAxis: {
            labels: {
                visible: false
            },
            categories: $scope.dates,
            axisCrossingValues: [0, $scope.dates.length]
        },    
    };

Kendo图表第二个值是Axis问题，不使用axisCrossingValue

2 个答案: