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;
}

charist.js中的发烧图表

1 个答案: