如何在highcharts

Y轴显示在X轴上的日期等列

我的CSV文件看起来像这样日期，成功，失败，数 2015-03-30,95,65,160 2015年3月31日， 10,8,18 2015-04-01,38,20,58 我必须在X轴上显示日期。如何在highcharts

我的代码看起来像这样有什么修改我必须做的请建议我在此

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 


     <!-- 1. Add these JavaScript inclusions in the head of your page --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 


     <!-- 2. Add the JavaScript to initialize the chart on document ready --> 
     <script type="text/javascript"> 
     $(document).ready(function() { 

      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'column' 
       }, 
       title: { 
        text: 'statistics' 
       }, 
       xAxis: { 

        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: 'hits' 
        } 
       }, 
       series: [] 
      }; 




      $.get('user_profile19.csv', function(data) 
      { 
       // Split the lines 
       var lines = data.split('\n'); 
       $.each(lines, function(lineNo, line) 
       { 
        var items = line.split(','); 

        // header line containes categories 
        if (lineNo > 0) { 

         $.each(items, function(itemNo, item) 

         { 
          if (itemNo == 0) options.xAxis.categories.push(item); 
         }); 
        } 

        // the rest of the lines contain data with their name in the first position 
        else if(lineNo==0) { 
         var series = 
         { 
          data: [] 
         }; 
         $.each(items, function(itemNo, item) 
         { 
          if (itemNo == 0) 
          { 
           series.name = item; 
          } 
          else 
          { 
           series.data.push(parseFloat(item)); 
         } 
         }); 

         options.series.push(series); 
        } 
        else 
        { 
        } 
       }); 

       var chart = new Highcharts.Chart(options); 
      }); 


     }); 
     </script> 

    </head> 
    <body> 

     <div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em"> 
      NOTE: This demo shows a way of manually parsing CSV. As of Highcharts 4.0 this is 
      not necessary for simple CSV files, as this functionality is built into the 
      <a href="http://api.highcharts.com/#data">Data module</a>. 
     </div> 

     <!-- 3. Add the container --> 
     <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 


    </body> 
</html>

来源

2015-04-06 happy

你的代码中有一些错误在里面。首先，它看起来好像你打算从第一行中取出类别，但是从其他所有行中取而代之。然后，您只需将每行的第一项（始终是日期）创建为类别。显然这不是你想要的。

这个小提琴：http://jsfiddle.net/hibiscus/ec8gm8oq/做我相信你想要做的。 CSV数据仅作为变量添加以简化事情。相关的代码是这样的：

var categoryIndex = 0; 
var categories = []; 

$.each(lines, function(lineNo, line) 
      {      
       var items = line.split(','); 
       // header line containes categories 

       if (lineNo == 0) {       
        for (var i=1; i < items.length; i++) { 
         categories.push(items[i]); 
        } 
       } 

       if (lineNo > 0) { 
        $.each(items, function(itemNo, item) 
        {        
         if (itemNo == 0) options.xAxis.categories.push(item); 
        }); 

        var series = 
        { 
         data: [] 
        }; 

        $.each(items, function(itemNo, item) 
        {        
         if (itemNo == 0) 
         { 
          series.name = categories[categoryIndex++]; 
         } 
         else 
         {                        
          series.data.push(parseFloat(item)); 
         } 
        }); 
        options.series.push(series); 
       } 

      });

来源

2015-04-06 22:57:53 Hibiscus

这就是我想要的，1）但是如果我在其他日子显示总成功和总失败，目前它显示在1-4-2015日期，而不是在同一天，例如在30-3-2015，只有它必须显示 2）我怎样才能显示total_success，total_failure和堆叠格式图相同日期的总数要显示。请在此建议我。 – happy 2015-04-07 06:42:59

我并不完全清楚你要问什么，但如果你只是想让这些值每天都堆叠起来，你只需要添加堆叠：对你的plotOptions为true。这是一个更新的小提琴：http://jsfiddle.net/hibiscus/ec8gm8oq/1/ – Hibiscus 2015-04-07 15:20:09

非常感谢它，我只是在我的文件中添加了plotOptions。非常感谢你！ – happy 2015-04-08 16:46:10

如何在highcharts

回答

相关问题