차트 js를 사용하여 아래 그림과 같이 그릴 수 있습니다.

Question

그래프를 그리려는 것 같습니다. 나는 이미 내가 할 수 그릴 수 있도록 내 프로젝트에 차트 JS 라이브러리가이 그래프를 사용하여 차트 JS

방법이 그래프를 그리는 나에게 알려 주시기 바랍니다. 다른 라이브러리를 제안 해주십시오 차트 JS와 가능하지 않은 경우

Answer 1

당신은 Highcharts-ng를 각도로 나는이 사용 highchart 같은 짓을 가지고 갠트 차트 기능

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