如何使用圖表繪製如下圖表js

我想繪製一張圖形，如下所示。我已經有圖表JS庫在我的項目，所以我可以能夠繪製該圖用圖JS如何使用圖表繪製如下圖表js

請告訴我如何繪製此圖。如果無法與圖表JS請推薦一些其他的庫

2017-01-09 Arunkumar

我做了這樣的事情使用highchart .js – Mox

@mox你能通過小提琴分享 – Arunkumar

你可以看看我在幾個月前問過的這個問題。也許你可以將這個解決方案適應於urs。 http://stackoverflow.com/questions/35197463/how-to-remove-the-padding-on-the-both-ends-of-the-highchart – Mox

可以使用Highcharts-ng了角具有GANT圖表功能

var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container' 
      }, 

      title: { 
       text: 'SOTMP Checklist Compliance History' 
      }, 

      xAxis: { 
       type: 'datetime' 
      }, 

      yAxis: { 

       categories: ['Category 9', 
          'Category 8', 
          'Category 7', 
          'Category 6', 
          'Category 5', 
          'Category 4', 
          'Category 3', 
          'Category 2', 
          'Category 1'], 
       tickInterval: 1,    
       tickPixelInterval: 200, 
       labels: { 
        style: { 
         color: '#525151', 
         font: '12px Helvetica', 
         fontWeight: 'bold' 
        }, 
        /* formatter: function() { 
         if (tasks[this.value]) { 
          return tasks[this.value].name; 
         } 
        }*/ 
       }, 
       startOnTick: false, 
       endOnTick: false, 
       title: { 
        text: 'Criteria' 
       }, 
       minPadding: 0.2, 
       maxPadding: 0.2, 
        fontSize:'15px' 

      }, 

      legend: { 
       enabled: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ tasks[this.y].name + '</b><br/>' + 
         Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) + 
         ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
       } 
      }, 

      plotOptions: { 
       line: { 
        lineWidth: 10, 
        marker: { 
         enabled: false 
        }, 
        dataLabels: { 
         enabled: true, 
         align: 'left', 
         formatter: function() { 
          return this.point.options && this.point.options.label; 
         } 
        } 
       } 
      }, 

      series: series 

     });

DEMO

來源

2017-01-09 05:38:27 Sajeetharan

highcharts不是開源的。你能建議一些開源嗎？ – Arunkumar

您可能需要編寫指令，否則您可以使用庫angular-gant – Sajeetharan

如何使用圖表繪製如下圖表js

回答

相關問題