Question

我有一张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);

HighStock CrossHair值显示在多个趋势的工具提示之外

0 个答案: