Question

如果我使用默认的Highcharts工具提示，它会显示一个圆圈图表数据的颜色（http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/处的浅蓝/黑色圆圈）：

但如果您在工具提示（http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/）上使用自定义格式，则不会显示颜色：

如何在自定义格式化工具提示中获取/使用该颜色？据我所知，他们的文档中没有任何内容（http://api.highcharts.com/highcharts#tooltip.formatter）解释如何在自定义格式化工具提示中使用它。

默认显示工具提示中的数据颜色：

tooltip: {
    shared: true
}

但这不是：

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
        });

        return s;
    },
    shared: true
},

Answer 1

我找到了这个文档（http://api.highcharts.com/highcharts#tooltip.pointFormat）。他们使用的HTML位于pointFormat下，而不是formatter：

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

以下是用于在工具提示中获取彩色圆圈的更新代码：

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + point.y;
        });

        return s;
    },
    shared: true
},

Answer 2

改进WOUNDEDStevenJones答案，但使用非jQuery特定解决方案：

在pointFormat（http://api.highcharts.com/highcharts#tooltip.pointFormat）中模仿以下HTML：

<span style="color:{series.color}">\u25CF</span>

我为工具提示格式化函数创建了这个非jQuery依赖代码：

formatter: function() {
    /* Build the 'header'.  Note that you can wrap this.x in something
     * like Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x)
     * if you are dealing with a time series to display a more 
     * prettily-formatted date value.
     */
    var s = '<span style="font-size: 10px">' + this.x + '</span><br/>';

    for ( var i = 0; i < this.points.length; i++ ) {

        var myPoint = this.points[i];
        s += '<br/><span style="color:' 
             + myPoint.series.color
             + '">\u25CF</span>'
             + myPoint.series.name + ': ';

        /* Need to check whether or not we are dealing with an 
         * area range plot and display a range if we are
         */
        if ( myPoint.point.low && myPoint.point.high ) {

            s += myPoint.point.low + ' - ' + myPoint.point.high;

        } else {

            s += myPoint.y;

        }
    }

    return s;
},
shared: true

Answer 3

如果您希望工具提示的主要部分看起来相同，并且只是要以不同方式格式化的x值，则可以使用headerFormat属性而使用point.key而不是this.x.这将完成同样的事情，而不必重现系列体。

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>'
}

Answer 4

你可以试试这个 -

$data = array();
$data['created_at'] = Carbon::now();

DB::table('list')->insert($data);

对我来说，这段代码的输出看起来像默认模板。希望这会帮助其他人:)

Answer 5

You may use:

    public static String createNewPresident(string strTitle, string strText, string strImageUrl)
{
    SqlConnection conn = openConnection();//Open Connection

    string strSQL = "INSERT INTO President(PresidentTitle, " +
                " PresidentDescription, " + " PresidentImageURL) " +
                " VALUES('" + strTitle + "' , '" + strText + "' , '" + strImageUrl + "')";//Insert Into Statement

    SqlCommand cmd = new SqlCommand(strSQL, conn);

    cmd.ExecuteNonQuery();

    closeConnection(conn);//Close Connection
    return strTitle;//Display Success
}//createNewPresident

如何使用工具提示格式化程序并仍然显示图表颜色（默认情况下）？

5 个答案: