1. 首頁
  2. 問答
  3. 如何使用圖表JS或其他圖書館

如何使用圖表JS或其他圖書館

2016-12-21 59 views

回答

5

我建議你散點圖。在散點圖中，您可以繪製多條獨立線。正如你可以從下面的圖片看到的。
enter image description here

[示例代碼]

var scatterChart = new Chart(ctx1, { 
     type: 'line', 
     data: { 
      datasets: [ 
      { 

       label: 'Scatter Dataset', 
       backgroundColor: "rgba(246,156,85,1)", 
       borderColor: "rgba(246,156,85,1)", 
       fill: false, 
       borderWidth : 15, 
       pointRadius : 0, 
       data: [ 
        { 
         x: 0, 
         y: 9 
        }, { 
         x: 3, 
         y: 9 
        } 
       ] 
      }, 
      { 
       backgroundColor: "rgba(208,255,154,1)", 
       borderColor: "rgba(208,255,154,1)", 
       fill: false, 
       borderWidth : 15, 
       pointRadius : 0, 
       data: [ 
        { 
         x: 3, 
         y: 7 
        }, { 
         x: 5, 
         y: 7 
        } 
       ] 
      }, 
      { 

       label: 'Scatter Dataset', 
       backgroundColor: "rgba(246,156,85,1)", 
       borderColor: "rgba(246,156,85,1)", 
       fill: false, 
       borderWidth : 15, 
       pointRadius : 0, 
       data: [ 
        { 
         x: 5, 
         y: 5 
        }, { 
         x: 10, 
         y: 5 
        } 
       ] 
      }, 
      { 
       backgroundColor: "rgba(208,255,154,1)", 
       borderColor: "rgba(208,255,154,1)", 
       fill: false, 
       borderWidth : 15, 
       pointRadius : 0, 
       data: [ 
        { 
         x: 10, 
         y: 3 
        }, { 
         x: 13, 
         y: 3 
        } 
       ] 
      } 
      ] 
     }, 
     options: { 
      legend : { 
       display : false 
      }, 
      scales: { 
       xAxes: [{ 
        type: 'linear', 
        position: 'bottom', 
        ticks : { 
         beginAtzero :true, 
         stepSize : 1 
        } 
       }], 
       yAxes : [{ 
        scaleLabel : { 
         display : false 
        }, 
        ticks : { 
         beginAtZero :true, 
         max : 10 
        } 
       }] 
      } 
     } 
    });

休息般的色彩配置，或者，如果你想隱藏y軸做得一樣需要你的項目。

來源

2016-12-21 11:34:11

1

您可以試試這個庫jQuery.Gantt。這是非常有用的，並提供了很多選項來繪製甘特圖

來源

2016-12-21 11:38:18

5

編輯這種方法將無法有效地工作，更復雜的情況下，需要顯示一個單一的Y值多條。

我會去與一個堆積水平橫線圖表的兩個數據集。第一個數據集是透明的，用於抵消第二個數據集，這是您的實際數據。下面的代碼也可以防止工具提示出現在第一個數據集中。

enter image description here

http://codepen.io/pursianKatze/pen/OmbWvZ?editors=1111

[樣品CODE]

var barOptions_stacked = { 
 
    hover :{ 
 
     animationDuration:10 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
      label:"Duration", 
 
      ticks: { 
 
       beginAtZero:true, 
 
       fontFamily: "'Open Sans Bold', sans-serif", 
 
       fontSize:11 
 
      }, 
 
      scaleLabel:{ 
 
       display:false 
 
      }, 
 
      gridLines: { 
 
      }, 
 
      stacked: true 
 
     }], 
 
     yAxes: [{ 
 
      gridLines: { 
 
       display:false, 
 
       color: "#fff", 
 
       zeroLineColor: "#fff", 
 
       zeroLineWidth: 0 
 
      }, 
 
      ticks: { 
 
       fontFamily: "'Open Sans Bold', sans-serif", 
 
       fontSize:11 
 
      }, 
 
      stacked: true 
 
     }] 
 
    }, 
 
    legend:{ 
 
     display:false 
 
    }, 
 
}; 
 

 
var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, {  
 
    type: 'horizontalBar', 
 
    data: { 
 
     labels: ["1", "2", "3", "4"], 
 
     
 
     datasets: [{ 
 
      data: [50,150, 300, 400, 500], 
 
      backgroundColor: "rgba(63,103,126,0)", 
 
      hoverBackgroundColor: "rgba(50,90,100,0)" 
 
      
 
     },{ 
 
      data: [100, 100, 200, 200, 100], 
 
      backgroundColor: ['red', 'green', 'blue', 'yellow'], 
 
     }] 
 
    }, 
 
    options: barOptions_stacked, 
 
}); 
 

 
// this part to make the tooltip only active on your real dataset 
 
var originalGetElementAtEvent = myChart.getElementAtEvent; 
 
myChart.getElementAtEvent = function (e) { 
 
    return originalGetElementAtEvent.apply(this, arguments).filter(function (e) { 
 
     return e._datasetIndex === 1; 
 
    }); 
 
}
.graph_container{ 
 
    display:block; 
 
    width:600px; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> 
 
<html> 
 
<body> 
 
<div class="graph_container"> 
 
<canvas id="myChart"></canvas> 
 
</div> 
 
</body> 
 
</html>

來源

2017-04-25 17:48:13 SMir

相關問題

 相關問題