javascript - Highcharts and phantomjs error. Can't find variable Highcharts - Stack Overflow

admin管理员组

文章数量:1290232

I am trying to generate some serverside charts using Highcharts and phantomjs, but the following error keeps appearing:

Can't find variable Highcharts.

I know that there are similar questions here but none of them have helped me. I am using Windows, with phantomjs 2.1.1, Highcharts 4.2.5

Here is the options.js file:

{
  infile: {
            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]
                }]
          },
          callback: function(chart){
          chart.renderer
               .arc(200,150,100,50,-Math.PI,0)
               .attr({fill:'#FCFFC5',stroke:'black','stroke-width':1})
               .add();
          },
 constr: "Chart",
 outfile: "//tmp//chart.png"
}

And the highcharts-convert.js config options:

var config = {
        HIGHCHARTS: 'highcharts.js',
        JQUERY: 'jquery-1.9.1.min.js',
        TIMEOUT: 5000 /* 5 seconds timout for loading images */
    },

Has anyone solved this issue?

I am trying to generate some serverside charts using Highcharts and phantomjs, but the following error keeps appearing:

Can't find variable Highcharts.

I know that there are similar questions here but none of them have helped me. I am using Windows, with phantomjs 2.1.1, Highcharts 4.2.5

Here is the options.js file:

{
  infile: {
            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]
                }]
          },
          callback: function(chart){
          chart.renderer
               .arc(200,150,100,50,-Math.PI,0)
               .attr({fill:'#FCFFC5',stroke:'black','stroke-width':1})
               .add();
          },
 constr: "Chart",
 outfile: "//tmp//chart.png"
}

And the highcharts-convert.js config options:

var config = {
        HIGHCHARTS: 'highcharts.js',
        JQUERY: 'jquery-1.9.1.min.js',
        TIMEOUT: 5000 /* 5 seconds timout for loading images */
    },

Has anyone solved this issue?

• javascript
• highcharts
• phantomjs

Share Improve this question Follow asked Jul 10, 2016 at 16:32 magarisimagarisi 75722 gold badges1010 silver badges2121 bronze badges 4

• So here's the obvious question! Have you included highcharts library? – kaveh Commented Jul 10, 2016 at 16:37
• Following these instructions: Save these files all to one location; highcharts-convert.js, highcharts.js or highstock.js for stock charts, highcharts-more.js (for bubble, range, polar charts) and last but not least jQuery. The dependency and location of these files is configured in the highcharts-convert.js script. I have added the dependency in highcharts-convert.js as shown above. – magarisi Commented Jul 10, 2016 at 16:39
• Attach a screenshot with list all files in the folder: pha-high – Sebastian Bochan Commented Jul 11, 2016 at 9:13
• The solution provided from @Max Uppenkamp works! With the 'resources' attribute the chart is being rendered just fine – magarisi Commented Jul 11, 2016 at 16:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

I have the exact same problem, although my mand looks a bit different:

phantomjs  highcharts-convert.js -infile delete_this.json -outfile /home/max/BLA.png -width 300 -constr Chart -resources highcharts.js,jquery.js

as you see i included the needed files using the -resources option of phantom js, but i still get the 'Can't find variable: Highcharts' Error.

Maybe the resources part helps you?

EDIT: I solved my issue, and yours as well i think.

If you use the mand like i described it, it doesn't give you the Highcharts error, BUT it breaks when trying to parse the resources. That is due to a grave error in the current version of the highcharts-convert.js script.

In line 682 they split the arguments, but they use an undefined parameter resources.

fileList = resources.split('\,');

You need to change that to:

fileList = params.resources.split('\,');

It works for me now, i hope it helps you.

Thank you for the solution @max-uppenkamp. The Highcharts team should integrate this into their code without delay! EDIT: I see you have already notified them: https://github./highcharts/highcharts-export-server/issues/18

I note that a mand-line as minimal as this will still work:

phantomjs highcharts-convert.js -infile options.json -outfile chart.png -resources highcharts.js

Also, I only need highcharts.js, highcharts-convert.js and options.js in my folder. Seems that I don't need highcharts-more or jquery.

NB. My options.json file looks like this:

{ chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }

Solution number 2

Create a file called resources.js with the following contents and place it in the same folder as options.js. Now you don't need to edit highcharts-convert.js and it will still work.

{
    "files": "highcharts.js"
}

Hopefully, this might help others. If you're using https for jsfiddle then make sure you're including the highcharts library with https too. Otherwise you would get "ReferenceError: Can't find variable: Highcharts" in Safari console(not very helpful). In chrome console, you get a clear message. "Mixed Content: The page at 'https://jsfiddle/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery./jquery-migrate-1.1.0.js'. This request has been blocked; the content must be served over HTTPS.

For https make sure you have the following in the html window of jsfiddle:

<script src="https://code.highcharts./highcharts.js"></script>

本文标签： javascriptHighcharts and phantomjs error Can39t find variable HighchartsStack Overflow