如何将图表输出导出为JPEG或png格式？

Question

I already created an output chart in my project. the chart is working well. but I have no idea on, how can I export this chart in png or JPEG format.

Lots of exporting source code from the internet is using their own charts. In my case I used Highcharts. Can anyone help me?

This is my database code

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);
        }

this is my view

<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>

is there anyone who have any idea on, how can I achieve my desired output?

Answer 1

You can get chart instance and use exportChart function.

cshtml

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

script

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

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