highcharts补充(添加底部导航条)

添加下面导航条修改三个地方
1.   外部添加 navigator属性，   xAxis为导航条的数据

navigator: {
adaptToUpdatedData: true,
enabled: true,
xAxis: {
categories: chart_model.categories,

    },
},

　　

2. 设置时间类型
type: 'datetime',

3.  修改源码7173行，主要是修改tickIntervar值得获取，当有categories时候去掉赋值1,仍保持下面的算法。这样做的目的是当缩小时候防止横轴数据显示挤压

} else {
   axis.tickInterval = pick(
      /*tickIntervalOption,
       categories ? // for categoried axis, 1 is default, for linear axis use tickPix
       1 :
       // don't let it be more than the data range
       (axis.max - axis.min) * tickPixelIntervalOption / mathMax(axis.len, tickPixelIntervalOption)*/
      tickIntervalOption,
      // don't let it be more than the data range
      (axis.max - axis.min) * tickPixelIntervalOption / mathMax(axis.len, tickPixelIntervalOption)
   );
   // For squished axes, set only two ticks
   if (!defined(tickIntervalOption) && axis.len < tickPixelIntervalOption && !this.isRadial &&
      !this.isLog && !categories && startOnTick && endOnTick) {
      keepTwoTicksOnly = true;
      axis.tickInterval /= 4; // tick extremes closer to the real values
   }
}

　　

 

给一个参考接口：

/**
 * Created by drinking on 2015/9/8.
 */


/*
 *  图表设置
 */
function ChartSetting() {

    /*
     this.coord_type = "percentage";     // 坐标类型(percentage-百分比)
     this.vislble = {
     data: true,                     // 显示数据(true, false)
     xaixs_line: true,               // 显示X轴线(true, false)
     yaixs_line: true,               // 显示Y轴线(true, false)
     legend: true                    // 显示图例(true, false)
     };
     this.legend_align = "top";          // 图例对齐(top, bottom)
     this.title_align = "top";           // 标题对齐(top, bottom)
     */

    // 图表类型(column-柱形, line-线形)
    this.chart = {
        type: "column"
    };

    this.title = {
        text: ""
    };

    this.yAxis = {
        title: {text: ""}
    };
    return this;
}

function HighChartsExt(id, chart_model, chart_setting) {

    this.x_axis_cate_map = {};
    for (var i = 0; i < chart_model.categories.length; ++i) {
        this.x_axis_cate_map[chart_model.categories[i]] = i;
    }

    var x_min = 0, x_max = 11;
    if (chart_setting.chart.type == "column") {
        //x_max = 40 * 1.0 / chart_model.series.length;
        x_max = 12;
    }
    else if (chart_setting.chart.type == "line") {
        x_max = 12;
    }

    var test = chart_model.series;
    /* this.charts = $("#" + id).highcharts("StockChart", {
     chart: {
     renderTo: id,
     type: chart_setting.chart.type,
     },
     title: {text: chart_setting.title.text},
     /!*   xAxis: {
     categories: chart_model.categories,
     min: x_min,
     max: x_max
     },*!/
     xAxis: {
     tickPixelInterval: 200,//x轴上的间隔
     //    title :{
     //       text:"title"
     //    },
     type: 'datetime', //定义x轴上日期的显示格式
     labels: {
     formatter: function() {
     var vDate=new Date(this.value);
     //alert(this.value);
     return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();
     },
     align: 'center'
     }
     },

     legend: {
     enabled: true,
     align: 'right',
     backgroundColor: '',
     borderColor: '',
     borderWidth: 0,
     layout: 'vertical',
     verticalAlign: 'top',
     y: 25,
     shadow: true
     },
     yAxis:  {
     title: {text: chart_setting.yAxis.title.text},

     },
     series: chart_model.series,
     scrollbar: {enabled: true},
     });*/


    this.charts = new Highcharts.Chart({
        chart: {
            renderTo: id,
            type: chart_setting.chart.type,
        },
        navigator: {
            adaptToUpdatedData: true,
            enabled: true,
            xAxis: {
                categories: chart_model.categories,

            },
        },
        type: 'datetime',
        title: {text: chart_setting.title.text},
        xAxis: {
            categories: chart_model.categories,
            min: x_min,
            max: x_max
        },
        yAxis: {
            title: {text: chart_setting.yAxis.title.text},

        },
        series: chart_model.series,
        scrollbar: {enabled: true},
        //提示框一起展示，并且显示到横轴的直线
        /*    tooltip: {
         shared: true,
         crosshairs:true
         },
         */

    });
}

HighChartsExt.prototype.addToView = function (chart_model) {

    var start_index = this.charts.axes[0].categories.length;
    for (var i = 0; i < chart_model.categories.length; ++i) {

        var cate_name = chart_model.categories[i];
        var dest_index = this.x_axis_cate_map[cate_name];
        if (dest_index == undefined) {
            this.x_axis_cate_map[cate_name] = dest_index;
        }

        for (var j = 0; j < this.charts.series.length; ++j) {

            var dest_series = this.charts.series[j];
            var src_series = chart_model.series[j];

            if (dest_index == undefined) {
                // 数据不存在则添加新的点
                dest_series.addPoint([cate_name, src_series.data[i]], false);
            }
            else {
                // 数据已存在则修改数据
                dest_index = start_index + i;
                dest_series.options.data[dest_index] = src_series.data[i];
            }
        }
    }
}

HighChartsExt.prototype.update = function () {
    var $container = $(this.charts.renderTo);
    // false为不显示动画
    this.charts.setSize($container.width(), $container.height(), false);
}

// 图表功能，待扩展
HighChartsExt.prototype.setCoord = function (coord_type) {
}

HighChartsExt.prototype.showData = function (isShow) {
}
HighChartsExt.prototype.showLegend = function (isShow) {
}
HighChartsExt.prototype.showXLine = function (isShow) {
}
HighChartsExt.prototype.showYLine = function (isShow) {
}

HighChartsExt.prototype.legendAlign = function (align) {
}
HighChartsExt.prototype.titleAlign = function (align) {
}