Question

$(document).ready(function() {
        Highcharts.setOptions(Highcharts.theme);
        $('#div-chart').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Average Purchase',
                align: 'center'
            },
            subtitle: {
                text: ' '
            },
            xAxis: {
                categories: <?php echo json_encode($result['day']) ?>,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Millions)'
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Purchase',
                data: <?php echo json_encode($result['amount']) ?>
            }]
      });
});

在$(document).ready(function(){});中我定义了绘制图表的属性，x轴和y轴的属性以及它的属性。但是，现在我想构建一个函数，在该函数中，我传递参数是否要绘制高图表或画布，然后绘制该函数。怎么开始呢？有人可以帮忙吗？

Answer 1

查看官方documentation。你必须致电Highcharts.chart('div-chart', { ... your settings ... }。您可以将此值分配给变量，但不能像上面那样分配给div。你对绘制画布或Highchart是什么意思？

Answer 2

<?php
//dummy data    
$result['day'] = array('Sun', 'Man', 'Tue', 'Wed');
$result['amount'] = array(1, 32, 324, 3531, 15, 6);
$result['chartType'] = 'canvas';
//$result['chartType'] = 'normal'; //this one to draw normal chart
?>canvas

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.highcharts.com/4.0.4/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/4.0.4/modules/exporting.js"></script>

<style type="text/css">
    #div-chart {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

</style>

<script type="text/javascript">
    $(document).ready(function() {
    DrawhighChart(); //first draw high chart by default and make it hidden by
    <?php if($result['chartType'] === 'canvas'){
        ?> DrawCanvas($('#div-chart').highcharts());
    <?php } else { ?> $('#div-chart').show(); <?php } ?>
});

function DrawCanvas(chart) {
    EXPORT_WIDTH = 1000;
    var render_width = EXPORT_WIDTH;
    var render_height = render_width * chart.chartHeight / chart.chartWidth

    // Get the cart's SVG code
    var svg = chart.getSVG({
        exporting: {
            sourceWidth: chart.chartWidth,
            sourceHeight: chart.chartHeight
        }
    });

    // Create a canvas
    var canvas = document.createElement('canvas');
    canvas.height = render_height;
    canvas.width = render_width;
    document.body.appendChild(canvas);

    // Create an image and draw the SVG onto the canvas
    var image = new Image;
    image.onload = function() {
        canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
    };
    image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}


function  DrawhighChart(){
    Highcharts.setOptions(Highcharts.theme);
    $('#div-chart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Average Purchase',
            align: 'center'
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            categories: <?php echo json_encode($result['day']) ?>,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount (Millions)'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Purchase',
            data: <?php echo json_encode($result['amount']) ?>
        }]
    });
}

</script>

<div id='div-chart' style="display: none"></div>

注意：如果要动态更改属性，请按照与x轴值相同的操作，例如，如果要更改标题，则

 title: {
            text: '<?php echo $result["title"] ?>',
            align: 'center'
        },

Answer 3

我认为Thamaraiselvam是：

$(document).ready(function() {
    drawChart(chart_type, args...);
});

function drawChart(chart_type, args....){
    if (type === 'highchart') {
        drawHighChart(args);
    } else if (type === 'canvas'){
        drawCanvas(args);
    }
}

function drawHighChart(args){

}

function drawCanvas(args){

}

没有直接相关但仍然存在。我建议你看看Jquery的一面，它可以产生很多花哨的图形输出，通常比用javascript更省力。请参阅this文档。问候安迪

如何使用函数绘制高图？

3 个答案: