无需鼠标悬停的 HighChart 工具提示可见性答案

【问题标题】：HighChart tooltip visiblility without mouse hover无需鼠标悬停的 HighChart 工具提示可见性
【发布时间】：2018-01-17 19:23:49
【问题描述】：

到目前为止，我所做的是正在显示 HighChart 活动量表。一旦鼠标悬停，它就会连续显示文本。但我希望它在创建图表后立即显示文本（根本不需要鼠标悬停它）。因为我要保存图表的图像，然后将其存储在 localDirectory 中。此外，有什么方法可以创建图表而不在浏览器上呈现？我在想它是在服务器端制作的（因为 100 个图表对应 100 个标签是没有意义的）。

索引.cshtml

 <div id="container" style="width:40%; height:70%">
    </div>


        Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
            if (this.options.alwaysVisible) {
                return this.refresh(this.chart.series[0].data[0])
            }

            p.call(this, delay)
        })

^^ 一旦我将鼠标悬停，这将起作用，但我不想悬停它。而是在创建图表后立即显示内部文本（对于最外面的系列）。就像这个小提琴：http://jsfiddle.net/mushigh/ubb2wz72/ 但遗憾的是，当我尝试采用它时，我在浏览器中的工作方式不同。我什至试过这个：

chart.tooltip.refresh(chart.series[0].points[0]);

但是控制台中出现了这个未定义的“图表”错误。

对于第二个查询：下面是我在控制器端发送的图像数据，稍后将其保存在 localDir 中。无论如何我可以创建它而不在浏览器上呈现？

 setTimeout(function () {
            html2canvas(document.querySelector("#container")).then(canvas => {

                var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                ///location.href = img;

                $.ajax({
                    type: 'POST',
                    url: "Test/UploadImage",
                    data: '{ "imageData" : "' + img + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {
                        alert('Image saved successfully !');
                    }
                });

            })
        }, 3000);

控制器：

[HttpPost]
        public ActionResult UploadImage(string imageData)
        {
            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    string convert = imageData.Replace("data:image/png;base64,", "");

                    string input = imageData.Substring(imageData.IndexOf(",") + 1);

                    byte[] image64 = Convert.FromBase64String(input);

                                        bw.Write(image64);
                    bw.Close();
                }
            }
            return View();
        }

    }

【问题讨论】：

标签： javascript c# asp.net-mvc highcharts

【解决方案1】：

您可以使用 Highcharts 官方功能来渲染图像：导出模块 (https://www.highcharts.com/docs/export-module/export-module-overview)。它使您有机会设置自己的导出服务器或使用 Highcharts 提供的导出服务器。

对于这种特定情况，很容易禁用工具提示并在chart.events.load、plotOptions.solidgauge.point.events.mouseOver 和exporting.chartOptions.chart.events.load 中呈现自定义工具提示。无需悬停点。

  function renderCustomTooltip(point) {
    var series = point.series,
      chart = series.chart,
      renderer = chart.renderer,
      customTooltip = chart.customTooltip;

    if (customTooltip) {
      customTooltip.destroy();
    }

    chart.customTooltip = renderer.label(series.name + '<br><span style="font-size:2em; color: ' + point.color + '; font-weight: bold">' + point.y + '%</span>', 180, 180, null, null, null, true).attr({
      zIndex: 999
    }).add();
  }

现场演示： http://jsfiddle.net/kkulig/4p4rocx1/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

【讨论】：