Question

Y轴标签始终从0开始，直到略大于图中的最高值。我想从50开始，直到100（50,60,70,80,90,100）。

我使用的代码如下：

Html代码： div id ='chart_1'style ='height：200px; width：400px;' /格

Javascript代码：

$(document).ready(function () {
      $.elycharts.templates['line_basic_3'] = {
        type: "line",
        margins: [22, 10, 20, 30],
        defaultSeries: {
            type: "line",
            rounded: false,
            plotProps: {
                "stroke-width": 5
            }
        },
        series: {
            serie1: {
                type: "line",
                color: "#AAAAAA"
            },
            serie2: {
                type: "line",
                color: "#00AA00"
            },
            serie3: {
                type: "line",
                color: "#0000BB"
            },
            serie4: {
                type: "line",
                color: "green"
            },
            serie5: {
                type: "line",
                color: "black"
            }
        },
        defaultAxis: {
            labels: true,
            labelsProps: {
                fill: "#FFF",
                "font-size": "10px"
            }
        },
        features: {
            grid: {
                draw: [true, false],
                forceBorder: true,
                //ny: 3, // use 10 divisions for y grid
                //nx: 5, // 10 divisions for x grid
                props: {
                    stroke: "#FFF" // color for the grid
                }
            },
            legend: {
                horizontal: true,
                width: 360,
                height: 20,
                x: 30,
                y: 0,
                borderProps: {
                    "fill-opacity": 0.1
                }
            }
        }
    }


$('#chart_1' ).chart({ template: 'line_basic_3', legend: {serie1:'2011',serie2:'2012',serie3:'2013'}, labels: ['Jan','Feb','Mar'], values: {serie1:[20,45,10],serie2:[40,15,35],serie3:[10,30,5]}});"
});

Answer 1

你可以试试这个。获取所有系列数据的最小值，并从系列数据的每个值中减去该值。然后为l（'left'）轴的labelsFormatHandler数据实现一个处理程序，该数据将“重新格式化”要显示的y轴标签。为了说明，我使用了Kasyx上面提到的小提琴并尝试显示从-1000开始的y轴。请检查this生成的小提琴或下面的代码：

HTML

    <div id="chart" style="width: 300px; height: 300px"></div>

javascript代码：

//here is the series data
var series1 = [-1100, 35, 44, 83];
var series2 = [7, 15, 10, 130];

//{{gets the min value and substract this value to each 
//value of all the series data.  This will make the chart "start" at the min value
var startsAtMinY = true;
var minY = Number.MAX_VALUE;
function setMinY(series) {
    minY = Math.min(minY, Math.min.apply(Math, series));
}
function translateSeriesData(series){
    for (var i = 0; i < series.length; i++) {
        series[i] -= minY;
    }
}
setMinY(series1);
setMinY(series2);
translateSeriesData(series1);
translateSeriesData(series2);
//}}

$(function() {
  $("#chart").chart({
  template: "line_basic_2",
  tooltips: {
    serie1: ["a", "b", "c", "d"],
    serie2: ["a", "b", "c", "d"]
  },
  values: {
      serie1: series1,
      serie2: series2
//    serie1: [-1100, 35, 44, 83],
//    serie2: [7, 15, 10, 130]
  },
  defaultSeries: {
    fill: true,
    stacked: false,
    highlight: {
      scale: 2
    },
    startAnimation: {
      active: true,
      type: "grow",
      easing: "bounce"
    }
  }
});

});

$.elycharts.templates['line_basic_2'] = {
  type: "line",
  margins: [10, 10, 20, 50],
  defaultSeries: {
    plotProps: {
      "stroke-width": 4
    },
    dot: true,
    dotProps: {
      stroke: "white",
      "stroke-width": 2
    }
  },
  series: {
    serie1: {
      color: "red"
    },
    serie2: {
      color: "blue"
    }
  },
  defaultAxis: {
    labels: true
  },
    axis: {
        l: {
            labels: true,
            //to "reformat" the y-axis values
            labelsFormatHandler: function (label) {
                        if (startsAtMinY) {
                            return (minY + parseFloat(label)).toString();
                        } else {
                            return label;
                        }
             }
        }
    },    
  features: {
    grid: {
      draw: [true, false],
      props: {
        "stroke-dasharray": "-"
      }
    },
    legend: {
      horizontal: false,
      width: 80,
      height: 50,
      x: 220,
      y: 250,
      dotType: "circle",
      dotProps: {
        stroke: "white",
        "stroke-width": 2
      },
      borderProps: {
        opacity: 0.3,
        fill: "#c0c0c0",
        "stroke-width": 0
      }
    }
  }
};

如何在elycharts中控制Y轴上的标签

1 个答案: