javascript - 如何为 x 轴工具提示中的标签添加值？

Question

请告诉我如何在工具提示中添加 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"],
    ];

Answer 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,
    }]
  });
});