每个系列的Highcharts tooltipformat?

时间:2012-12-12 07:38:58

标签: asp.net-mvc highcharts dotnethighcharts

我正在使用dotnetHightcharts

BasicColumnChart

public static Highcharts BasicColumnChart(Series[] Series, string[] Categories, string Title = "", string SubTitle = "", string XAxisTitle = "", string YAxisTitle = "", string ToolTipFormat = "", string YAxisLabel = "")
{
    Highcharts chart = new Highcharts("chart")
        .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 300 })
        .SetTitle(new Title { Text = Title })
        .SetSubtitle(new Subtitle { Text = SubTitle })
        .SetXAxis(new XAxis { Categories = Categories })
        .SetYAxis(new YAxis
        {
            Min = 0,
            Title = new YAxisTitle { Text = YAxisTitle },
            Labels = new YAxisLabels
            {
                 Formatter = @"function() { return this.value +' " + YAxisLabel + "';}"
            }
        })
        .SetLegend(new Legend
        {
            Layout = Layouts.Vertical,
            VerticalAlign = VerticalAligns.Top,
            Align = HorizontalAligns.Right,
            Shadow = true,
            BackgroundColor = ColorTranslator.FromHtml("#FFFFFF"),
            Floating = true
        })
        .SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.x +' - '+ this.y +' " + ToolTipFormat + "'; }" })
        .SetPlotOptions(new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                PointPadding = 0.2,
                BorderWidth = 0
            }
        })
        .SetSeries(Series);

    return chart;
}

我可以为每个系列设置相同的tooltipFormat,其中包含以下行:

.SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.x +' - '+ this.y +' " + ToolTipFormat + "'; }" })

以上代码输出:date - value tooltipFormat

但我想为每个系列展示不同的格式。我为什么要这样,因为我想显示具有不同单位的不同数据,例如:

value[0] = 220 V    //Volt
value[1] = 5 A      //Ampere
...
value[15] = 1200 kW //Kilowatt

有很多关于这个主题的例子,但是这些例子只改变了文本。我的数据视图如下:

NAME     VALUE    UNIT

Volt     220      V
Ampere     5      A
....

我想动态更改每个系列的tooltipFormat。我想动态地添加UNIT字段。我怎么能这样做?

感谢。

2 个答案:

答案 0 :(得分:3)

您可以在系列对象中添加自定义属性:

series:{name:'series1',unit:'%'}

并可以在工具提示格式化函数中访问它:

this.series.options.unit

答案 1 :(得分:2)

您可以直接在一系列中执行此操作:

http://api.highcharts.com/highcharts#plotOptions.series.tooltip.valueSuffix

例如,这是一个系列:

series: [{
       data: [10, 20, 30],
       type: "line",
       name: "Percentage",
       tooltip: { valueSuffix: "%", }
     },]