Question

我使用Highcharts库开发图表并在第一次工作正常但当我回来运行应用程序时，我发现所有图表都是黑色图像我不知道为什么？

我的jsp：

<html>
<head>
<script src="<c:url value='/assets/js/jquery.js' />"></script>
<script src="<c:url value='/assets/js/highstock.js' />"></script>
<script src="<c:url value='/assets/js/highcharts.js' />"></script>
<script src="<c:url value='/assets/js/highmaps.js' />"></script>
<script src="<c:url value='/assets/js/exporting.js' />"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"> 
</head>
<body>
<div id="impressionChart" style="height: 400px"></div>

<script type="text/javascript">
        var campaignId = $('#campaignId').val();
        var processed_json = [];
        var parsedJson;
        var myArray = [];
        var url = "/ADVoice/advertiser/campaign/performance/campaignImpression/"
                + campaignId;
        $
                .ajax({
                    url : url,
                    datatype : "json",
                    type : "GET",
                    async : false,
                    success : function(data) {
                        // alert(data);
                        parsedJson = JSON.stringify(data);
                        alert(parsedJson);
                        var jsonArray = JSON.parse(parsedJson);
                        // alert(jsonArray['campaign_data'].length);
                        for (i = 0; i < jsonArray['campaign_data'].length; i++) {
                            myArray[i] = [];
                            myArray[i][0] = Date
                                    .parse(jsonArray['campaign_data'][i].key);
                            myArray[i][1] = parseInt(jsonArray['campaign_data'][i].value);

                        }
                        // alert(myArray);
                    },
                    error : function() {
                        alert("error");
                    }
                });
        // draw chart
        Highcharts.setOptions({
            global : {
                useUTC : false
            }
        });
        $('#impressionChart').highcharts({
            chart : {
                type : "column"
            },
            title : {
                text : "Campaign Impression"
            },
            xAxis : {
                type : 'datetime',
                labels : {
                    formatter : function() {
                        return Highcharts.dateFormat('%a %d %b', this.value);
                    }
                }
            },
            yAxis : {
                title : {
                    text : "Number of impressions"
                }
            },
            series : [ {
                name : "No.Impressions:",
                data : myArray,
                pointStart : Date.parse(myArray[0][0])
            // pointInterval: 24 * 3600 * 1000 // one day
            } ],
            exporting : {
                csv : {
                    dateFormat : '%Y-%m-%d'
                }
            }
        });
    </script>
</body>    
</html>

Answer 1

我在使用Highcharts-6.1.0时遇到了这个问题。

解决方案： -

而不是从

导入js

src="Scripts/Highcharts-6.1.0/code/js/highcharts-3d.js"

从

导入

src="Scripts/Highcharts-6.1.0/code/highcharts-3d.js"**

对于模块（exports-js和export-data.js），请执行

src="Scripts/Highcharts-6.1.0/code/modules/highcharts-3d.js"

Answer 2

问题是css和js版本之间的差异。解决方案：

1。NuGet的安装（highcharts.js）

2。添加到视图

shareImage= (item) => {
   console.log('hello',item)
  RNFetchBlob.fetch('GET', `some url`)
    .then(resp => {
      console.log('response : ', typeof resp);
      console.log('fff', JSON.parse(resp.data));
      let ab = JSON.parse(resp.data);
      console.log('data', ab)
      let base64image = ab;
      share('data:image/jpeg;base64,' + base64image);
    })
    .catch(err => {
      err && console.log(err);
    });

  share = base64image => {
    console.log('base64image : ', base64image);
    var shareOptions = {
      title:item.title,
      url: base64image,
      // message: 'https://somelink.com some message',
      subject: 'Subject'
    };

    Share.open(shareOptions)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        err && console.log(err);
      });
    }
  };

Answer 3

使用Highcharts的“ css样式”版本时，我遇到了类似的问题。当我尝试以png格式下载图表时，我得到的是黑色图像。

使用http://code.highcharts.com/js/modules/exporting.js而不是http://code.highcharts.com/modules/exporting.js解决了我的问题。 code.highcharts.com并未按css标题列出该文件的样式，但是它说所有与样式相关的文件都在“ / js /”文件夹下。

编辑：highcharts的7.x版本之后，将样式化版本与非样式化版本合并。以上链接是最新版本，因此可能无法解决7.x之前的问题。升级到最新版本并使用“ chart.styledMode = true”为我解决了整个问题。

Answer 4

正如您将在此CodePen中看到的那样，我通过您获得的结果“替换”了您的ajax函数。

我认为您的Ajax请求是正常的，因为您获得此结果，我根本无法在CodePen中执行此操作。我和你使用完全相同的for loop。

关于控制台中的错误，the link you provided非常明确。它说你称HightCharts功能包含在highstock库中。

<script src="<c:url value='/assets/js/jquery.js' />"></script>
<script src="<c:url value='/assets/js/highstock.js' />"></script>
<!-- script src="<c:url value='/assets/js/highcharts.js' />"></script -->
<script src="<c:url value='/assets/js/highmaps.js' />"></script>
<script src="<c:url value='/assets/js/exporting.js' />"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js">

如上所述注释掉highcharts.js。

Answer 5

如果有人仍然遇到此问题，我可以通过使用RGB值指定图表的所有颜色来解决问题。

例如在ASP.NET中，此代码：

chart.SetSeries(new[]
    {
        new Series {
            Name = "Average",
            Data = GetAverageData(),
            Color = Color.Crimson
        },
        new Series {
            Name = "Order",
            Data = GetOrderData(),
            Color = Color.RoyalBlue
        }

    });

转换为：

chart.SetSeries(new[]
    {
        new Series {
            Name = "Average",
            Data = GetAverageData(),
            Color = Color.FromArgb(255, 220, 20, 60)
        },
        new Series {
            Name = "Order",
            Data = GetOrderData(),
            Color = Color.FromArgb(255, 65, 105, 225)
        }
     });

Highcharts给我黑色图像

5 个答案: