【问题标题】:HighChart Bubble and Date / TooltipHighChart 气泡和日期/工具提示
【发布时间】:2015-10-08 15:12:13
【问题描述】:

我想用 HighChart 创建一个 BubbleChart,日期在 X 轴上,带有自定义工具提示。

这是我的代码:

        public ActionResult BubbleChart(int id)
    {
        Project p = db.Projects.Find(id);
        Series Serie1 = new Series();
        List<object> obj1= new List<object>();
        foreach (Info info in p.Infos)
        {
            object a = new object[] {  info.Date, p.Amount, Amount/100 };
            obj1.Add(a);
        }
        Serie1.Data = new DotNet.Highcharts.Helpers.Data(obj1.ToArray());
        Serie1.Name = "Name1";
                    Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { Type = ChartTypes.Bubble, ZoomType = ZoomTypes.Xy, Width = 600, Height = 400 })
            .SetTitle(new Title { Text = "ProjectInfo" + p.Name })
            .SetXAxis(new XAxis { Type = AxisTypes.Datetime,  Title = new XAxisTitle { Text = "Date" } })
            .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Amount" } })
            .SetSeries(new[]
            {
                Serie1
            }).SetTooltip(new Tooltip
            {
                HeaderFormat = "<span style=\"font-size:11px\">{series.name}</span><br>",
                PointFormat = "<span style=\"color:{point.color}\">Date</span>: <b>{point.x}</b><br/><span style=\"color:{point.color}\">Amount</span>: <b>{point.y:.2f}</b>"
            });

        return View(chart);
    }

此代码显示在工具提示中:“日期:14002943820497398”但不是我想要的日期,如何解决?

我的第二个问题是关于在工具提示中添加数据(项目名称、描述等...)我该怎么做?

谢谢

【问题讨论】:

    标签: javascript c# asp.net-mvc highcharts dotnethighcharts


    【解决方案1】:

    Highcharts 预计时间为以毫秒为单位的时间戳,但您以微秒为单位发送时间。此值 14002943820497398微秒 为单位。以毫秒为单位发送它将解决您的问题。

    对于工具提示中的自定义数据,您应该按顺序填写数据:

    data: [ { y : 10, customData: 'something' },
    { y : 12, customData: 'something' },
    { y : 14, customData: 'something' } ]
    

    在工具提示的格式化函数中

     tooltip: {
     formatter: function() {
               return 'Addition info: <b>'+ this.point.customData+'</b>';
     }
    }
    

    【讨论】:

    • 谢谢,我可以用什么?
    • 项目名称、描述等可以在您创建系列数据时放置。推送这些值并在工具提示格式化程序函数中取回它们
    • 很抱歉,即使在几毫秒内它也不起作用:/
    • 您可能需要将返回值包装在 Highcharts.dateFormat() 调用中 - api.highcharts.com/highcharts#Highcharts.dateFormat
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多