十三、highchart實現看板功能

原創

2020-02-21 12:05

之前對比了ECharts和Highcharts，發現highchart文檔更清晰，舉的例子也簡單明瞭；而echarts雖然看着很強大，熱力圖、平行座標等，官網上列出了一大堆效果圖的例子，但是，就是找不到頭緒，最後就放棄了Echarts，改用highchart了，ORZ~
某乎上還有討論：https://www.zhihu.com/question/21438840

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/json2.js"></script>
    <script type="text/javascript" src="/static/js/highcharts.js"></script>
    <script type="text/javascript" src="/static/js/highcharts-zh_CN.js"></script>
</head>
<body>
    <div class='mycontainer'>
        <br/>
        <div id="showChart"></div>
    </div>
</body>
</html>

javascript：

<script type="text/javascript">
$(document).ready(function(e) {
    loadData();
});

function displayOnChart(value, chartType) {
    /**
     * Highcharts 在 4.2.0 開始已經不依賴 jQuery 了，直接用其構造函數既可創建圖表
     **/
    console.log(value['devTime']);
    console.log(value['number']);
    var chart = Highcharts.chart('showChart', {
        chart: {
            type: chartType
        },
        title: {
            text: '各部門情況概覽'
        },
        xAxis: {
            categories: value['groups'],
            tickPosition: 'inside',
            // chartdiv寬度是1000px，刻度值平均分配
            tickPixelInterval: 1000 / value.length,
            crosshair: true
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            positioner: function() {
                return {
                    x: 80,
                    y: 50
                };
            },
            shadow: false,
            borderWidth: 0
        },
        series: [{
            name: '開發耗時(h)',
            color: '#ED561B',
            data: value['devTime']
        }, {
            name: '測試耗時(h)',
            color: '#24CBE5',
            data: value['testTime']
        }, {
            name: '已上線需求(個)',
            color: 'blue',
            data: value['number']
        }]
    });
}

function loadData() {
    datas = {
        "number": [9, 13, 11, 9, 1, 35, 1, 4, 2],
        "devTime": [32.6, 229.6, 31.0, 67.6, 8.0, 235.2, 16.0, 248.0, 28.0],
        "groups": ["測試1", "測試2", "測試3", "測試4", "測試5", "測試6", "測試7", "測試8", "測試9"],
        "testTime": [12.9, 137.6, 25.5, 45.0, 8.0, 128.79999999999995, 2.5, 53.5, 20.0]
    };
    //可以傳column展示柱狀圖，line展示折線圖
    displayOnChart(datas, 'line');
}
</script>