2016-03-11 35 views
0

请告诉我如何在tooltipe中的xAxis上添加标签的值。如何为xAxis工具栏中的标签添加值?

headerFormat - 试过,不工作

function showGraph(zero) { 
      zero = typeof zero === "undefined" ? true : zero 
      sourceData.sort(function(a, b) { 
       return a[0] - b[0] 
      }) 
      series = {}  

      dateStart = new Date(sourceData[0][0].toString().replace(/(\d{4})(\d{2})(\d{2})/g, "$1-$2-$3")) 
      dateEnd = new Date(sourceData[sourceData.length - 1][0].toString().replace(/(\d{4})(\d{2})(\d{2})/g, "$1-$2-$3")) 
      sourceData.map(function(entry) { 
       var date = new Date(entry[0].toString().replace(/(\d{4})(\d{2})(\d{2})/g, "$1-$2-$3")) 
       var microtime = date.getTime() 
       var dealer = entry[2] 
       var seriesSum = [] 

       //int 
       if (typeof entry[1] === "undefined") { 
        entry[1] = 0 
       } 

       //create group 
       if (typeof 

series[dealer] === "undefined") { 
       series[dealer] = [] 
      } 

      //find similar day 
      if (series[dealer].length > 0 && series[dealer][series[dealer].length - 1][0] === microtime) { 
       series[dealer][series[dealer].length - 1][1] += entry[1] 
       series[dealer][series[dealer].length - 1][2] += entry[3] 
      } else { 
       series[dealer].push([microtime, entry[1],entry[3],entry[0]]) 
      } 

      //mixed sum 
      if (seriesSum.length > 0 && seriesSum[seriesSum.length - 1][0] === microtime) { 
       seriesSum[seriesSum.length - 1][1] += entry[1] 
      } else { 
       seriesSum.push([microtime, entry[1]]) 
      } 
     }) 

     seriesByName = {} 
     seriesArray = [] 

     _.map(series, function(days, dealer) { 
      var newDays = []; 

      if (zero) { 
       for (var dateTemp = new Date(dateStart.getTime()), i = 0; dateTemp < dateEnd; dateTemp.setDate(dateTemp.getDate() + 1)) { 
        var microtime = dateTemp.getTime() 
        try { 
         if (days[i][0] == microtime) { 
          newDays.push(days[i]) 
          i++ 
         } else { 
          newDays.push([microtime, 0]) 
         } 

        } catch (error) {} 
       } 
      } else { 
       newDays = days 
       if(!sourceDataMoney.hasOwnProperty(dealer)){ 
        sourceDataMoney[dealer] = {} 
        for(var dayIndex in newDays){ 
         var day = newDays[dayIndex], 
          mktime = day[0]; 
         sourceDataMoney[dealer][mktime] = day; 
        } 
       } 
      } 

      seriesByName[dealer] = newDays 
      seriesArray.push({ 
       name: dealer, 
       data: newDays, 
       id: dealer, 
       dataGrouping: { 
        approximation: "sum", 
        enabled: true, 
        forced: true, 
        units: [ 
         ['day', [1]] 
        ], 
        dateTimeLabelFormats: { 
         week: ['За 7 дней начиная от "%A, %b %e, %Y"', '%A, %b %e', '-%A, %b %e, %Y'] 
        } 
       } 
      }) 
      console.log(seriesArray) 
     }) 
     graphContainer = $('#graph').highcharts('StockChart', { 
      rangeSelector: { 
       buttons: [, { 
        type: 'month', 
        count: 1, 
        text: '1м' 
       }, { 
        type: 'month', 
        count: 2, 
        text: '2м' 
       }, { 
        type: 'month', 
        count: 6, 
        text: '6м' 
       }, { 
        type: 'year', 
        count: 1, 
        text: '1г' 
       }, { 
        type: 'all', 
        text: 'Весь' 
       }], 
       selected: 5 
      }, 
      tooltip: { 
       animation: false, 
       valueDecimals: 0, 
       formatter:function(hz){ 
         var html = '', 
         totalCount = 0, 
         totalSum = 0; 

        for(var pointId in this.points){ 
         var point = this.points[pointId], 
          sum = 0; 

         if(sourceDataMoney.hasOwnProperty(point.series.name) && sourceDataMoney[point.series.name].hasOwnProperty(point.x)){ 
          sum = sourceDataMoney[point.series.name][point.x][2].formatMoney(0, '.', '') + ' руб.'; 
         } 
         html += '<span style="color:' + point.color + '">' + point.series.name + ' : ' + point.y + ' заказов на ' + sum + '</span><br />'; 
         totalCount += point.y 
         var totalSumArr = sum.split(' ,'); 
         for(var i=0;i<totalSumArr.length;i++){ 
          totalSum = totalSum + parseInt(totalSumArr[i]); 
         } 
        } 
        html += '<br /><b>Итого заказов: '+totalCount+'</b><br />'; 
        html += '<b>Итого сумма: '+totalSum+' руб.</b>'; 
        return html; 
       } 
      }, 
      yAxis: [{ 
       // labels: { 
       //  formatter: function() { 
       //   return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
       //  } 
       // } 
      }, { 
       labels: { 
        enabled: true 
       } 
      }], 
      plotOptions: { 
       series: { 
        //compare: 'percent' 
       } 
      }, 
      series: seriesArray, 
      legend: { 
       align: 'center', 
       verticalAlign: 'bottom', 
       layout: 'horizontal', 
       enabled: true 
      } 
     }) 

我相信,解决办法很简单。但我找不到它。

更新! 因此它看起来像一组数据

var sourceData = [ 
     [20140829, 63, "Москва и МО","2001"], 
     [20140930, 1, "Краснодар","2002"], 
     [20140819, 1, "Краснодар","2003"], 
     [20141120, 1, "Краснодар","2004"], 
     [20141010, 1, "Краснодар","2005"], 
     [20141003, 2, "Краснодар","2006"], 
     [20140825, 81, "Москва и МО","2007"], 
     [20140822, 77, "Москва и МО","2008"], 
     [20140918, 90, "Москва и МО","2009"], 
     [20140930, 128, "Москва и МО","20010"], 
     [20141031, 85, "Москва и МО","20011"], 
     [20140827, 105, "Москва и МО","20012"], 
     [20141027, 141, "Москва и МО","20013"], 
     [20141201, 165, "Москва и МО","20014"], 
     [20141203, 115, "Москва и МО","20015"], 
     [20140901, 74, "Москва и МО","20016"], 
     [20141223, 55, "Москва и МО","20017"], 
     [20140910, 92, "Москва и МО","20018"], 
     [20141117, 124, "Москва и МО","20019"], 
     [20141030, 11, "Ставрополь","20020"], 
     [20141204, 10, "Ставрополь","20021"], 
     [20140904, 80, "Москва и МО","20022"], 
     [20141112, 4, "Санкт-Петербург","20023"], 
     [20150122, 51, "Москва и МО","20024"], 
     [20141020, 109, "Москва и МО","20025"], 
     [20140930, 17, "Новосибирск","20026"], 
     [20141122, 9, "Москва и МО","20027"], 
     [20141009, 87, "Москва и МО","20028"], 
     [20140815, 60, "Москва и МО","20029"], 
     [20141210, 167, "Москва и МО","20030"], 
     [20141029, 95, "Москва и МО","20031"], 
     [20141205, 135, "Москва и МО","20032"], 
     [20140905, 67, "Москва и МО","20033"], 
     [20141030, 117, "Москва и МО","20034"], 
     [20141114, 127, "Москва и МО","20035"], 
     [20141113, 135, "Москва и МО","20036"], 
     [20141127, 102, "Москва и МО","20037"], 
     [20141225, 79, "Москва и МО","20038"], 
     [20141128, 157, "Москва и МО","20039"], 
     [20141215, 87, "Москва и МО","20040"], 
     [20141013, 74, "Москва и МО","20041"], 
     [20141001, 82, "Москва и МО","20042"], 
     [20150129, 31, "Москва и МО","20043"], 
     [20141030, 9, "Курск","20044"], 
     [20140818, 1, "Курск","20045"], 
    ]; 

回答

1

谢谢你的数据。最好对xAxis的数据进行排序,否则,你会得到一个混乱的图形和一个Highcharts错误N15。

一定要使用Unix的时间戳,你的情况乘以时间戳由1000

for(i=0;i<sourceData.length;i++) 
{ 
    sourceData[i][0]=sourceData[i][0]*1000; 
} 

要显示的工具提示,使用格式化时间:

tooltip: { 
     formatter: function() { 
     var temp=new Date(this.x); 
     return 'x value: ' + temp; 
     } 
    }, 

请检查example

var sourceData = [ 
     [20140815, 60, "Москва и МО","20029"], 
     [20140818, 1, "Курск","20045"], 
     [20140819, 1, "Краснодар","2003"], 
     [20140822, 77, "Москва и МО","2008"], 
     [20140825, 81, "Москва и МО","2007"], 
     [20140827, 105, "Москва и МО","20012"], 
     [20140829, 63, "Москва и МО","2001"], 
     [20140901, 74, "Москва и МО","20016"], 
     [20140904, 80, "Москва и МО","20022"], 
     [20140905, 67, "Москва и МО","20033"], 
     [20140910, 92, "Москва и МО","20018"], 
     [20140918, 90, "Москва и МО","2009"], 
     [20140930, 1, "Краснодар","2002"], 
     [20140930, 128, "Москва и МО","20010"], 
     [20140930, 17, "Новосибирск","20026"], 
     [20141001, 82, "Москва и МО","20042"], 
     [20141003, 2, "Краснодар","2006"], 
     [20141009, 87, "Москва и МО","20028"], 
     [20141010, 1, "Краснодар","2005"], 
     [20141013, 74, "Москва и МО","20041"], 
     [20141020, 109, "Москва и МО","20025"], 
     [20141027, 141, "Москва и МО","20013"], 
     [20141029, 95, "Москва и МО","20031"], 
     [20141030, 11, "Ставрополь","20020"], 
     [20141030, 117, "Москва и МО","20034"], 
     [20141030, 9, "Курск","20044"], 
     [20141031, 85, "Москва и МО","20011"], 
     [20141112, 4, "Санкт-Петербург","20023"], 
     [20141113, 135, "Москва и МО","20036"], 
     [20141114, 127, "Москва и МО","20035"], 
     [20141117, 124, "Москва и МО","20019"], 
     [20141120, 1, "Краснодар","2004"], 
     [20141122, 9, "Москва и МО","20027"], 
     [20141127, 102, "Москва и МО","20037"], 
     [20141128, 157, "Москва и МО","20039"], 
     [20141201, 165, "Москва и МО","20014"], 
     [20141203, 115, "Москва и МО","20015"], 
     [20141204, 10, "Ставрополь","20021"], 
     [20141205, 135, "Москва и МО","20032"], 
     [20141210, 167, "Москва и МО","20030"], 
     [20141215, 87, "Москва и МО","20040"], 
     [20141223, 55, "Москва и МО","20017"], 
     [20141225, 79, "Москва и МО","20038"], 
     [20150122, 51, "Москва и МО","20024"], 
     [20150129, 31, "Москва и МО","20043"], 

    ]; 

for(i=0;i<sourceData.length;i++) 
{ 
    sourceData[i][0]=sourceData[i][0]*1000; 
} 

$(function() { 
    $('#container').highcharts({ 

    xAxis: { 
     type:'datetime' 
    }, 
    tooltip: { 
     formatter: function() { 
     var temp=new Date(this.x); 
     return 'x value: ' + temp; 
     } 
    }, 
    series: [{ 
     name: 'Tokyo', 
     data: sourceData, 
    }] 
    }); 
}); 
+0

它确实有效,但不是在我的情况。我不知何故通过了日期 –

+0

检查我的答案,我适应它下面的数据:) –

+0

thxü)不错的工作) –