2

我有一个 HighStock 图表（下图），其中平均显示 10-15 个趋势。我发现在单个显示器上运行如此多的趋势时，工具提示变得缓慢且太大。我想禁用工具提示，但仍显示十字准线悬停的每个趋势的值。我在 HighStock 中订阅了哪些事件，以将工具提示中显示的值移动到自定义内容？

我附上了我的图表图像，其中工具提示可见，左侧有自定义图例。我想让悬停的值（在十字准线处）出现在左侧的图例项旁边，就像它们在工具提示中一样，禁用工具提示，但保留十字准线。

我找到了几种使用 PlotOptions.Series.Point.Events.MouseOver 的方法，但这只适用于一种趋势。我如何为我的所有趋势做到这一点？

图表截图

值得注意的是，我的代码运行良好。上图是在 MVC4 中动态生成的工作图的图片，在 PC/MAC/iPhone/iPad 上显示精美。我的问题最终需要精通 HighStock 的人来回答，因为他们将拥有了解需要订阅哪些事件或需要进行哪些更改才能将我需要的数据推送到 Javascript 函数所需的深入知识（所以我可以将十字准线值推送到我的自定义图例）。这不是“我的代码正确吗？”的问题。这是一个“我使用什么代码来获得所需的效果？”的问题。

但这里是代码，以防万一。请注意，我正在构建一个 C# 通用“var”并通过“Javascript()”返回它。

// BUILD HIGHCHARTS JAVASCRIPT
        var data = @"$(function () {
            $.post(""";
        if (Request.ApplicationPath.ToString() == "/")
        {
            data += @"/HighCharts/GetData"", function (data) {";
        }
        else
        {
            data += Request.ApplicationPath.ToString() + @"/HighCharts/GetData"", function (data) {";
        }
        data += @"// Create the chart
                window.chart = new Highcharts.StockChart({
                    chart: {
                        events : {
                            load : LoadComplete
                        },

                        renderTo: 'container',
                        zoomType: 'x'
                    }, ";
        data += @"colors: [ ";

        foreach (var a in model.listOfSensors)
        {
            data += "'" + a.ColorHex.ToString() + "'";
            y = y + 1;
            if (y != model.listOfSensors.Count)
            {
                data += ",";
            }
        }

        data += @"], ";
        data += @"plotOptions: {
                    series: {
                        point: {
                            events: {
                                mouseOver: function () {
                                    SeriesMouseOver(this.series.name)
                                },
                                mouseOut: function () {
                                    SeriesMouseOut(this.series.name)
                                }
                            }
                        }
                    }
                },";
        data += @"navigator : {
                    adaptToUpdatedData: false
                }, ";
        data += @"exporting : {
                    enabled: true
                }, ";
        data += @"rangeSelector : {
                        buttons: [{
                            type: 'hour',
                            count: 12,
                            text: '12h'
                        }, {
                            type: 'day',
                            count: 1,
                            text: '1d'
                        }, {
                            type: 'day',
                            count: 2,
                            text: '2d'
                        }, {
                            type: 'all',
                            text: 'All'
                        }],
                        inputEnabled: true, // it supports only days
                        inputStyle: {
                            color: '#CCCCCC',
                            fontFamily: 'Arial'
                        },
                        labelStyle: {
                            color: '#000000',
                            fontFamily: 'Arial',
                            fontWeight: 'bold'
                        },
                        selected : 3 // all
                    },
                xAxis : {
                    events : {
                        afterSetExtremes : afterSetExtremes
                    },
                    minRange: 3600 * 1000 // one hour
                },  
                yAxis: [";

        // BUILD SCALES
        foreach (IECRM_Data_Project.Entities.Scale a in model.scales)
        {
            data += "{ ";
            data += "min: " + a.Min.ToString() + ",";
            data += "showEmpty: " + a.ShowIfEmpty.ToString().ToLower() + ",";
            data += "max: " + a.Max.ToString() + ",";
            data += "lineColor: '" + a.ColorHex.ToString() + "',";
            data += "labels: { enabled: false }" ;
            data += "}";
            x = x + 1;
            if (x != model.scales.Count) //ADD A COMMA AFTER EACH EXCEPT THE LAST
            {
                data += ",";
            }
        }

           data += @"],
                    tooltip: {
                        pointFormat: '<span id=""{series.name}.replace(/\./g, """")"" style=""color:{series.color}"">{series.name}: {point.y}</span><br />',
                        useHTML: true,
                        valueDecimals: 1
                    },
                    series: data
                });
            });

        });";
return JavaScript(data);
4

0 回答 0