在 highcharts 中创建饼图

Question

下面是我想要在 highcharts 中创建饼图的 JSON 格式的数据..

{
  "title": {"text": "Pie"},

  "series": 
  [
    {
        "type": "pie",
        "name": "Actual",
        "data": 
         [
            [
                "Salesgrowth",
                45
            ],
            [
                "marketshare",
                26.8
            ]
         ]
    }
  ]
}

这是有效的 JSON，我从 Web 服务获取此输出，当我调用此服务并调用此方法来运行此 JSON 输出以创建饼图时，我收到如下错误，

Uncaught TypeError: Cannot set property 'renderTo' of undefined 

下面是我用来调用我的文件的 JQuery 函数，该文件存储了我的 Web 服务的 JSON 输出，

function loadJson() {
       $(document).ready(function () {
           //alert("inside");
           var chart;
           var seriesData;
           $.getJSON("val1.json", function (data) {
               var chartoptions = data;
               chartoptions.chart.renderTo = 'container';
               chart = new Highcharts.Chart(chartoptions);

           });

       });
   },

并且此功能与其他类型的图表（如条形图、折线图和柱形图）一起运行良好......经过各种图表测试，我只遇到饼图的问题......任何帮助将不胜感激

---------更新问题------ 下面是我为了获取值而更改的 JSON 输出

{
   "title":{"text":"Financial"},
   "chart":{"type":"pie"},
   "series":
     [ {"name":"Actual-Market Share","data":["Market Share",30]},{"name":"Actual-Market Share","data":["Sales Growth",70]}]}

下面是我得到的输出，

我无法确定我到底在搞什么...任何想法都会有很大帮助...

---------更新输出------------

  {
    "legend":{"enabled":"true"},
    "title":{"text":"Financial"}, 
    "chart":{"type":"pie"},
    "series":[{"name":"Actual","data":[{"str":"Market Share","flo":20}]},
              {"name":"Actual","data":[{"str":"Sales Growth","flo":30}]},
              {"name":"Actual","data":[{"str":"Operating Profit","flo":40}]},
              {"name":"Actual","data":[{"str":"Gross Margin %","flo":10}]}]}

Answer 1

您的 json 不包含图表对象，因此设置 chart.renderTo 将不起作用。

如果您可以更改网络服务，请让它在您的 json 中添加以下内容：

 chart: {
    },

如果你不能改变后端，你可以改变你的javascript在设置renderTo之前添加图表对象：

$.getJSON("val1.json", function (data) {
           var chartoptions = data;
           if (typeof chartoptions.chart === 'undefined')  {
               chartoptions.chart = {};
           }
           chartoptions.chart.renderTo = 'container';
           chart = new Highcharts.Chart(chartoptions);
       });