2014-09-19 53 views
0

余米建立一个HTML并调用的XML文件,并创建抛出一个折线图,现在我的problum是如何创建多个图表是我的数据是否进入xml?

如何创建多个图表像我想创建这个数据的三个图表

  1. 馅饼

  2. 线

  3. 行是在默认情况下显示,但我想馅饼和列字符我的数据进入xml文件

IM期运用这个api key

现在我搜索净这个解决方案,但林没有找到解决办法,我发现在this

但这里是数据是静态的JavaScript如何将这种

我真正Data link is this

我的代码是这样的

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <script src="jquery.min.js"></script> 
     <script src="highcharts.js"></script> 

     <script> 

      // Code goes here 
$(document).ready(function() { 
    /* *********************************************************** */ 
    /* *********************************************************** */ 


    var newOPtion4 = { 

    chart: { 
     renderTo: 'lineChart4', 
     type: 'line', 
     backgroundColor: { 
     linearGradient: [0, 0, 500, 500], 
     stops: [ 
      [0, 'rgb(255, 240, 255)'], 
      [1, 'rgb(240, 255, 240)'] 
     ] 
     }, 
     borderWidth: 1, 
     plotBackgroundColor: 'rgba(255, 255, 255, .8)', 
     plotShadow: true, 
     plotBorderWidth: 1 
    }, 
    title: { 
     text: 'Salary Chart Last 8 Years', 
     style: { 
     color: '#000', 
     font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' 
     } 
    }, 
    xAxis: { 
     categories: [], 
     tickmarkPlacement: 'on', 
     gridLineWidth: 1, 
     lineColor: '#000', 
     tickColor: '#000', 
     labels: { 
     style: { 
      color: '#000', 
      font: '11px Trebuchet MS, Verdana, sans-serif' 
     } 
     }, 
     title: { 
     style: { 
      color: '#333', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      fontFamily: 'Trebuchet MS, Verdana, sans-serif' 

     } 
     } 
    }, 
    yAxis: { 
     alternateGridColor: null, 
     minorTickInterval: 'auto', 
     lineColor: '#000', 
     lineWidth: 1, 
     tickWidth: 1, 
     tickColor: '#000', 
     labels: { 
     style: { 
      color: '#000', 
      font: '11px Trebuchet MS, Verdana, sans-serif' 
     } 
     }, 
     title: { 
     text: 'Month Salary', 
     style: { 
      color: '#333', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      fontFamily: 'Trebuchet MS, Verdana, sans-serif' 
     } 
     } 
    }, 
    legend: { 
     itemStyle: { 
     font: '9pt Trebuchet MS, Verdana, sans-serif', 
     color: 'black' 

     }, 
     itemHoverStyle: { 
     color: '#039' 
     }, 
     itemHiddenStyle: { 
     color: 'gray' 
     } 
    }, 
    credits: { 
     style: { 
     right: '10px' 
     } 
    }, 
    labels: { 
     style: { 
     color: '#99b' 
     } 
    }, 
    plotOptions: { 
     series: { 
     animation: { 
      duration: 3000 
     }, 

     } 
    }, 
    series: [] 
    }; 

    // Load the data from the XML file 
    $.get('data.xml', function(xml) { 

    // Split the lines 
    var $xml = $(xml); 

    // push categories 
    $xml.find('categories item').each(function(i, category) { 
     newOPtion4.xAxis.categories.push($(category).text()); 
    }); 

    // push series 
    $xml.find('series').each(function(i, series) { 
     var seriesOptions = { 
     name: $(series).find('name').text(), 
     data: [] 
     }; 



     // push data points 
     $(series).find('data point').each(function(i, point) { 
     seriesOptions.data.push(
      parseInt($(point).text()) 
     ); 
     }); 

     // add it to the options 
     newOPtion4.series.push(seriesOptions); 
    }); 
    var chart = new Highcharts.Chart(newOPtion4); 
    }); 
    /* *********************************************************** */ 
    /* *********************************************************** */ 

}); 
     </script> 
    </head> 

    <body> 
    <div id="lineChart4" style="width: 400px; height: 300px; margin:0 auto"></div> 
    </body> 

</html> 

回答

0

在这些线路:

var seriesOptions = { 
    name: $(series).find('name').text(), 
    data: [] 
    }; 

你正在创建系列。如果添加:

var seriesOptions = { 
    name: $(series).find('name').text(), 
    data: [], 
    type: 'column' 
    }; 

然后您将创建列系列。现在,如果您在每个系列中添加'type'属性(如上面的'name'),那么将该属性用于系列类型。

相关问题