Как я могу экспортировать вывод своей диаграммы в формат JPEG или png?

Question

Я уже создал выходной график в своем проекте. график работает хорошо. но я понятия не имею, как я могу экспортировать эту диаграмму в формате PNG или JPEG.

Многие экспорты исходного кода из Интернета используют свои собственные диаграммы. В моем случае я использовал Highcharts. Кто-нибудь может мне помочь?

Это код моей базы данных

using (SqlConnection sqlcon = new SqlConnection(connstring))
        {
            //canteen 1
            List<SurveyQtnResult> resQ1 = new List<SurveyQtnResult>();
            SqlCommand cmd = new SqlCommand("select ans,isnull(count(ans),0) as cAns from DB_CNTS.dbo.SurveyResultBD_tbl where canteenNo = "+ cNum + " and qNum = 1 and month(dateCreated) = " + month + " and year(dateCreated) = " + year + " group by ans", sqlcon);
            cmd.CommandType = CommandType.Text;
            cmd.CommandTimeout = 1000000;
            sqlcon.Open();  
            SqlDataReader rdr = cmd.ExecuteReader();

            while (rdr.Read())
            {
                SurveyQtnResult q1 = new SurveyQtnResult();
                q1.name = rdr["ans"].ToString();
                q1.y = Convert.ToInt32(rdr["cAns"]);
                resQ1.Add(q1);
            }
            ViewBag.resQ1 = resQ1.ToList();
            ViewBag.DataPoints = JsonConvert.SerializeObject(resQ1.ToList(), _jsonSetting);
        }

это мой взгляд

<div class="box col-lg-4">
     <div id="container" style="height:500px; width:500px;"></div>
</div>


<script type="text/javascript">
// Radialize the colors
            Highcharts.setOptions({
                colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
                    return {
                        radialGradient: {
                            cx: 0.5,
                            cy: 0.3,
                            r: 0.7
                        },
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                        ]
                    };
                })
            });

            // Build the chart Q 1
            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Question 1 Results'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y} ',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            connectorColor: 'silver'
                        }
                    }
                },
                series: [{
                    name: 'VOTES',
                    data: @Html.Raw(ViewBag.DataPoints)
                    }]
            });


</script>

есть кто-нибудь, кто имеет какое-либо представление о том, как я могу достичь желаемого результата?

Answer 1

Вы можете получить график instance и использовать функцию exportChart.

cshtml

<button id="btnPng">Export to PNG</button>

Сценарий

var chart =  Highcharts.chart('container', {}) // your code

$("#btnPng").on('click', function(event) {
    chart.exportChart({type: "image/png"});
});