如何在Highcharts工具提示中或类别下方显示日期

Question

我不熟悉图表，我想根据从数据库中获得的数据显示日期。我想在工具提示中或类别下方显示日期。现在类别显示日期名称。如果可能的话，我想在类别的“日期”下方显示该天的日期。

<script>
    Highcharts.chart('column', {
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: <?= json_encode($day_names) ?>,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Count'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0.5
            }
        },
        colors: [
            '#1cc88a', '#4e73df', '#f6c23e', '#e74a3b'
        ],
        credits: {
            enabled: false
        },
        exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                }
            }
        },
        series: JSON.parse('<?= $processed_stars_data ?>')
    });
</script>

Answer 1

您可以使用moment.js来获取格式化的值，但是Highcharts拥有自己的日期格式功能Highcharts会更惯用。可以附加放在highcharts构造函数中的tooltip选项上，如下所示：

    tooltip: {
        formatter: function() {
            return  '<b>' + this.series.name +'</b><br/>' +
                Highcharts.dateFormat('%e - %b - %Y',
                                      new Date(this.x))
            + ' date, ' + this.y + ' Kg.';
        }
    }

您可能还希望将dateTimeLabelFormats对象与xAxis下的日期所需的选项。

http://jsfiddle.net/Kc23N/3/