發燒圖表charist.js

Question

是否有可能使用Charists.js或與其他charing庫製作發燒圖表？

發熱圖表例如：Fever chart

背景可以是圖片。

Answer 1

我使用了靜態系列並覆蓋了CSS。 這不是優雅，但它的作品。

JS：

var option = {  
     fullWidth: false, 
     axisX: { 
      high: 100, 
      low: 0, 
      type: Chartist.AutoScaleAxis, 
      onlyInteger: true, 
      scaleMinSpace: 10 
     }, 
     axisY: { 
      high: 100, 
      low: 0, 
      scaleMinSpace: 10, 
      onlyInteger: true 
     }, 
     series:{ 
      'bg-green':{ 
       showArea: true, 
       showLine: false, 
       showPoint: false 
      }, 
      'bg-yellow':{ 
       showArea: true, 
       showLine: false, 
       showPoint: false 
      }, 
      'bg-red':{ 
       showArea: true, 
       showLine: false, 
       showPoint: false 
      }, 
      'fever':{ 
       showArea: false, 
       showLine: false, 
       showPoint: true 
      } 
     } 
    }; 
    var responsiveOptions = []; 

    var chart = {}; 
    $scope.model = []; 
    var series = { 
     name: "Pulmao", 
     data: [], 
    }; 

    var dataset = []; //here goes your dynamic data. 

    var bgGreen = { 
     name: "bg-green", 
     data:[ {x:4, y:0}, {x:100, y:90} ] 
    }; 
    var bgYellow = { 
     name: "bg-yellow", 
     data:[ {x:0, y:10}, {x:100, y:110} ] 
    }; 
    var bgRed = { 
     name: "bg-red", 
     data:[ {x:0, y:100}, {x:100, y:100} ] 
    }; 

    dataset = { 
     series: [bgRed, bgYellow, bgGreen, series], 
    }; 
    chart = new Chartist.Line('#feverChart', dataset, option, 
    responsiveOptions); 

HTML

<div id="bufferChart" class="bufferchart ct-chart ct-minor-seventh"></div> 

CSS

.bufferchart .ct-series-a .ct-area{ 
    stroke: none; 
    fill-opacity: .6; 
    fill: #d70206; 
} 

.bufferchart .ct-series-b .ct-area{ 
    stroke: none; 
    fill-opacity: .7; 
    fill: yellow; 
} 
.bufferchart .ct-series-c .ct-area{ 
    stroke: none; 
    fill-opacity: .7; 
    fill: green; 
}