High-chart Div сохранить как изображение и сохранить файл в пути к серверу - PullRequest
Новая
       17

High-chart Div сохранить как изображение и сохранить файл в пути к серверу

0 голосов
/ 18 июня 2020

Привет, у меня есть highchart, который хочу сохранить как путь к образу сервера 

 <div id="container" class="container"></div>


 var options = {
            chart: {},
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ]
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                type: 'column'
            }]
        }

        var chart = Highcharts.chart('container', options)

        var data = {
            type: 'POST',
            options: JSON.stringify(options),
            filename: 'test.png',
            type: 'image/png',
            async: true
        };
        var exportUrl = 'https://export.highcharts.com/'
        $.post(exportUrl, data, function (data) {
            var imageUrl = exportUrl + data          
            var urlCreator = window.URL || window.webkitURL
           document.querySelector("#image1").src = imageUrl
            
        })
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<h2>
Exported image below
</h2>
<img id="image1"/>

Я могу экспортировать изображение в html, но как я могу сохранить это изображение в пути к серверу, в котором отображается экспортируемое изображение an html (Image1) элемент управления изображением

1 Ответ

0 голосов
/ 01 июля 2020

Наконец, я сделал это сам.

вот код

Вот javascript после создания диаграммы .. 

 var data = {
            type: 'POST',
            options: JSON.stringify(options),
            filename: 'test.png',
            type: 'image/png',
            async: true
        };
        var exportUrl = 'https://export.highcharts.com/'
        $.post(exportUrl, data, function (data) {
            var imageUrl = exportUrl + data          
            var urlCreator = window.URL || window.webkitURL
       
            document.getElementById('<%= hf2.ClientID %>').value=imageUrl;
        })

Теперь код бэкэнда чтобы получить imageurl и сохранить как байт Мой код находится в Vb. net

 saveimage(hf1.Value, _Fname)

, где fname - имя файла, я хочу сгенерировать имя файла динамически. поэтому у меня есть другая функция для этого 

Public Sub saveimage(ByVal _url As String, ByVal _filename As String)           
        _filename = Server.MapPath(".") + "\Charts\" & _filename
        save_file_from_url( _filename, _url)
    End Sub




Public Sub save_file_from_url(ByVal file_name As String, ByVal url As String)
        Dim content As Byte()
        Dim request As HttpWebRequest = CType(WebRequest.Create(url), HttpWebRequest)
        Dim response As WebResponse = request.GetResponse()
        Dim stream As Stream = response.GetResponseStream()
        Using br As BinaryReader = New BinaryReader(stream)
            content = br.ReadBytes(500000)
            br.Close()
        End Using
        response.Close()
        Dim fs As FileStream = New FileStream(file_name, FileMode.Create)
        Dim bw As BinaryWriter = New BinaryWriter(fs)
        Try
            bw.Write(content)
        Finally
            fs.Close()
            bw.Close()
        End Try
    End Sub

Это очень легко и просто, но множество примеров кодов, которые я видел в net, очень сложны и непрактичны.

...