如何控制電子書中Y軸上的標籤

Question

Y軸標籤始終從0開始，直到稍大於圖中的最大值。我想從50開始，直到100（50,60,70,80,90,100）。

我使用的代碼如下：

HTML代碼： DIV ID = 'chart_1' 風格= '高度：200像素;寬度：400像素;'/DIV

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