Question

到目前为止我所做的是正在显示HighChart Activity guage。鼠标悬停后，它会连续显示文本。但是我想让它在创建图表时尽快显示文本（根本不需要将鼠标悬停在其上）。因为我正在保存图表的图像，然后将其存储在localDirectory中。此外，有没有办法在浏览器上创建图表和渲染？我认为它是服务器端的（因为100个图表100个图表没有任何意义）。

Index.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]);

但这未定义＆＃34;图表＆＃34;控制台出错。

对于第二个查询：下面是我在控制器端发送的图像数据，后来将其保存在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();
        }

    }

Answer 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

HighChart工具提示可见性，无鼠标悬停

1 个答案: