Question

<body>
<div id="container" style="display: none"></div>
<button id="canvas" onClick="myFunc(this.id);">Canvas</button>
<button id="highchart" onClick="myFunc(this.id);">HighChart</button>
<script type="text/javascript">
var type='';
function myFunc(id)
        {
            type+=id;
            console.log(type);
        }
if(type!=''){
$(document).ready(function(){
Highcharts.setOptions(Highcharts.theme);
$.ajax
({
    type:'post',
    url:'data.php',
    success:function(response)
    {

        var res= JSON.parse(response);
        //console.log(res.day); //console.log(res.amount);
        DrawHigh(res);
        if(type=='canvas'){
            DrawCanvas($('#container').highcharts(),res);
        } else { $('#container').show(); }
    }
   });

  });
  }
    function DrawCanvas(chart,data) {
    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 DrawHigh(data)
    {
    Highcharts.chart('container', {
        xAxis: {
          categories: data.day, 
          title: {
              enabled: true,
              text: '<b>Purchase</b>',
              style: {
                  fontWeight: 'normal'
                    }
            }
         },
       legend: {
          enabled: false
            },
        credits: {
          enabled: false
            },
      series: [{
          data: data.amount,
           }]
     });
   }
  </script>
  </body>

在这段代码中，我试图使用两种不同的图表渲染类型画布和高图表来显示数据。所以这里有两个函数绘制画布并绘制高图。我想当我点击按钮'canvas'然后绘制调用的canvas函数时，点击按钮'high chart'然后绘制高图表函数运行但是在这个代码中当我点击任何按钮时没有调用函数？

Answer 1

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


<body>
<div id="container" style="display: none"></div>
<button id="canvas" onClick="myFunc(this.id);">Canvas</button>
<button id="highchart" onClick="myFunc(this.id);">HighChart</button>
<script type="text/javascript">

$(document).ready(function(){
    Highcharts.setOptions(Highcharts.theme);
});

function myFunc(id)
{
    type = '';
    type = id;

    if(!type)
        return false

    makeAjax(type);
}

function makeAjax(type) {
    $.ajax ({
        type:'post',
        url:'testing.php',
        success:function(response) {
            var res= JSON.parse(response);
            //console.log(res.day); //console.log(res.amount);
            DrawHigh(res);
            if(type=='canvas'){
                DrawCanvas($('#container').highcharts(),res);
                $('#container').hide();
            } else {
                $('#container').show();
                $('canvas').remove();
            }
        }
    });
}

function DrawCanvas(chart,data) {
    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 DrawHigh(data) {

     $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Purchase',
            align: 'center'
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            categories: data.days,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount (Millions)'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Purchase',
            data: data.amount,
        }]
    });

}
  </script>
  </body>

以上代码可根据您的需要使用。几乎没有问题。没有名为Highcharts.chart

的功能

在函数内部不应该调用$(document).ready(function()。

首先将代码格式化为右对齐并尝试使用断点，以便快速找到问题。

如何根据不同的id呈现图表？

1 个答案: