Question

我正在将我的烧瓶应用程序与Highcharts集成，而Highcharts图是两条线的混合（一条是样条线，另一条是散点图）。该行在工具提示中显示正确的日期格式，而散点图则不显示。

我确实看到了一个可以通过编写JavaScript代码来完成此操作的链接：

tooltip: {
    crosshairs: true,
    formatter: function () {
        return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + '</b> ' + this.series.name + ': ' + this.y + ' m/s';
    }
}

我想在不编写JavaScript代码的情况下这样做。

我的主要python代码是这样的：

series = [
    {
        "type":"scatter",
        "name": 'Data Points',
        "data":modified_result,
        "tooltip":{"xDateFormat":'%Y-%m-%d'}
    },
    {
        "type":"spline",
        "name": 'trend line',
        "data":line_result,
        "tooltip":{"xDateFormat":'%Y-%m-%d'}
    }
]

然后我通过说：

来渲染我的模板

return flask.render_template('index.html',
           result = result,
           predicted_prices = predicted_prices,
           chartID=chartID,
           chart=chart,
           series=series,
           title=title,
           xAxis=xAxis,
           yAxis=yAxis)

在index.html中，我有：

<script>
  var chart_id = {{ chartID|safe }}
  var series = {{ series|safe }}
  var title = {{ title|safe }}
  var xAxis = {{ xAxis|safe }}
  var yAxis = {{ yAxis|safe }}
  var chart = {{ chart|safe }}

调用javascript：

$(document).ready(function() {
  $(chart_id).highcharts({
    chart: chart,
    title: title,
    xAxis: xAxis,
    yAxis: yAxis,
    series: series
  });
});

Answer 1

＆＃39;分散＆＃39; type对工具提示有一些不同的设置。看一下这个answer。您可以在series设置代码中执行此操作，就像使用xDateFormat一样。

{
    "type":"scatter",
    "name": 'Data Points',
    "data":modified_result,
    "tooltip":{
       "xDateFormat":'%Y-%m-%d',
       "headerFormat": '{point.key}<br />',
       "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
    }
}

你可以在这里玩游戏，根据你的需要进行更精细的设置。样本fiddle。

Answer 2

我想我想出了如何做到这一点，以免影响日期格式。

而不是使用：

series = [
{
    "type":"scatter",
    "name": 'Data Points',
    "data":modified_result,
    "tooltip":{"xDateFormat":'%Y-%m-%d'}
}

我重新格式化为：

series = [{"name": 'Data Points', "data":modified_result, "marker" : { \
                "enabled" : "true", \
                "radius" : 4 \
            },"lineWidth" : 0,}

这将显示具有正确日期格式的散点图。

Scatter Plot的工具提示中的DateFormat不会更改

2 个答案: