Highcharts工具提示以毫秒为单位显示工具提示日期

wb1gzix0  于 2023-06-23  发布在  Highcharts
关注(0)|答案(2)|浏览(244)

In this jsFiddle我有一个时间序列Highcharts。X轴上的日期是正确的,但工具提示显示的是UTC数字而不是日期。这个图表有什么问题吗?

Highcharts.chart('container', {
  "chart": {
    "type": "spline",
  },
  "xAxis": {
    "title": {
      "text": "aaa",

    },
    "labels": {
      "style": {
        "fontSize": "8px"
      },
      "format": "{value:%d-%m-%Y}"
    }

  },
  "yAxis": [
    {
      "title": {
        "text": "Millions USD"
      },
      "labels": {
        "format": "{value:,0f}"
      },
      "maxPadding": 0
    }
  ],
  "series": [
    {
      "name": "the_date",
      "data": [
        [
          1262390400000,
          10
        ],
        [
          1270339200000,
          25
        ],
        [
          1283385600000,
          15
        ],
        [
          1288483200000,
          20
        ]
      ]
    }
  ],
  "tooltip": {
    "backgroundColor": "rgba(246, 238, 204, 1)",
    "borderColor": "rgba(58, 80, 225, 1)",
    "borderWidth": 1,
    "shadow": true,
    "valueDecimals": 0
  }
});
jogvjijk

jogvjijk1#

Highcharts不知道它是一个日期,你必须为你的轴指定它。Try my fiddle
我根据海查特的文件给你换了小提琴
我为您的轴"type": 'datetime'添加了类型

"xAxis": {
  "type": 'datetime',
  "title": {
    "text": "aaa",
  },
}

和工具提示"xDateFormat": "%Y-%m-%d"的格式。

"tooltip": {
  "backgroundColor": "rgba(246, 238, 204, 1)",
  "borderColor": "rgba(58, 80, 225, 1)",
  "borderWidth": 1,
  "shadow": true,
  "valueDecimals": 0,
  "xDateFormat": "%Y-%m-%d"
}

这里是Highcharts提供的fiddle的链接。

qv7cva1a

qv7cva1a2#

更改工具提示添加格式化程序:

tooltip: {
            borderRadius: 5,
            useHTML: true,
            formatter: function () {

      var date = new Date(this.x);
      var year = date.getFullYear();
                return '<div class="tooltip_box"><div><span class="seriesHeading">' + year  +
                    '</span> </div> <span class="seriesName">' + this.series.name +
                    ': </span><span class="seriesPoint" style="color:' + this.series.color + '; ">' + this
                        .y + '</span></div>';
            }
        },

完整示例:

function weeklyAverageScoreChartAjax(startDatePicker, endDatePicker) {
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
    });
    $.ajax({
        type: 'POST',
        data: {
            "from": startDatePicker,
            "to": endDatePicker
        },
        url: base_url_weekly_metabolic,
        cache: false,
        dataType: "JSON",
        success: function (response) {
            //Draw metabolicScoreChart
            if (response.status) {
                // console.log(response.data);
                weeklyAverageScoreChart(response.data);
            }
        },
        error: function () {
            weeklyAverageScoreChart(0, 0);
        }
    });
}

//weeklyAverageScore
function weeklyAverageScoreChart(data) {
    var series = [{
        name: "Average Metabolic Score",
        data: [],
        marker: {
            symbol: 'circle',
            fillColor: '#FD841F'
        },
        dataLabels: {
            enabled: true,
            format: '{point.y}'
        },
        name: "Weekly Average Metabolic score",
        legend: {
            symbol: 'circle',
        },
        color: "#FD841F"
    }];

    // return false;
    data.forEach(function (dataEl) {

        series[0].data.push([
            new Date(dataEl.date).getTime(),
            Number(dataEl.average)
        ]);
    });

    Highcharts.chart('weeklyAverageScore', {
        chart: {
            type: 'areaspline', // Set the background color here
            // scrollablePlotArea: {
            //   minWidth: 3000,
            //   scrollPositionX: 1,
            //   opacity: 10
            // }
        },
        title: {
            text: '2. Weekly Average Metabolic score',
            align: "left",
            margin: 30
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.1
            }
        },
    global: {
      useUTC: false
  },
        legend: {
            enabled: false,
        },
        tooltip: {
            borderRadius: 5,
            useHTML: true,
            formatter: function () {

      var date = new Date(this.x);
      var year = date.getFullYear();
                return '<div class="tooltip_box"><div><span class="seriesHeading">' + year  +
                    '</span> </div> <span class="seriesName">' + this.series.name +
                    ': </span><span class="seriesPoint" style="color:' + this.series.color + '; ">' + this
                        .y + '</span></div>';
            }
        },
        xAxis: {
            type: "category",
            startOnTick: true,
            endOnTick: true,
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%e %b, %Y', this.value);
                }
            },
            tickInterval: 24 * 3600 * 1000,
        },
        yAxis: {
            title: {
                text: 'Metabolic Score'
            },
            allowDecimals: true,
            labels: {
                format: '{value}'
            },
            gridLineDashStyle: 'longdash'
        },
        series: series,
        credits: {
            enabled: false
        },
        navigation: {
            buttonOptions: {
                theme: {
                    style: {
                        fontSize: '20px',
                        color: '#888',
                        item: "-20px"
                    },
                    states: {
                        hover: {
                            style: {
                                color: '#000'
                            }
                        }
                    }
                },
                useHTML: true
            }
        },

        exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                },
                exportButton: {
                    text: '<i class="fa fa-download"></i>',
                    // Use only the download related menu items from the default
                    // context button
                    menuItems: [
                        'downloadXLS',
                        'downloadCSV',
                    ]
                }
            }
        }

    });
}

输出:

相关问题