chart.js 入门&&highcharts 入门（推荐使用highcharts）

最新推荐文章于 2023-08-12 14:38:26 发布
最新推荐文章于 2023-08-12 14:38:26 发布
阅读量8.7k 收藏
点赞数
分类专栏： web前端学习 文章标签： chart.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/51462910
版权 
chart.js 参数说明
var lineChartData = {
    labels : ["09/12","09/13","09/14","09/15","09/16","09/17","09/18"], //X轴 坐标
    datasets : [
        {
            fillColor : "transparent", // 背景色
            strokeColor : "#ef7c1f", // 线
            pointColor : "#ef7c1f", // 点
            pointStrokeColor : "#fff", // 点的包围圈
            data : [120,140,110,130,150,170,160] // Y轴坐标
        },
        {
            fillColor : "transparent",
            strokeColor : "#3dc448",
            pointColor : "#3dc448",
            pointStrokeColor : "#fff",
            data : [80,90,80,100,110,130,100]
        }
    ]

}
var defaults = {

    //Boolean - If we show the scale above the chart data           
    scaleOverlay : false,

    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,

    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,

    //Number - The value jump in the hard coded scale
    scaleStepWidth : 20,

    // Y 轴的起始值
    scaleStartValue : null,

    // Y/X轴的颜色
    scaleLineColor : "rgba(0,0,0,.1)",

    // X,Y轴的宽度
    scaleLineWidth : 1,

    // 刻度是否显示标签, 即Y轴上是否显示文字
    scaleShowLabels : true,

    // Y轴上的刻度,即文字
    scaleLabel : "<%=value%>",

    // 字体
    scaleFontFamily : "'Arial'",

    // 文字大小
    scaleFontSize : 12,

    // 文字样式
    scaleFontStyle : "normal",

    // 文字颜色
    scaleFontColor : "#666",    

    // 是否显示网格
    scaleShowGridLines : false,

    // 网格颜色
    scaleGridLineColor : "rgba(0,0,0,.05)",

    // 网格宽度
    scaleGridLineWidth : 2, 

    // 是否使用贝塞尔曲线? 即:线条是否弯曲
    bezierCurve : false,

    // 是否显示点数
    pointDot : true,

    // 圆点的大小
    pointDotRadius : 8,

    // 圆点的笔触宽度, 即:圆点外层白色大小
    pointDotStrokeWidth : 2,

    // 数据集行程
    datasetStroke : true,

    // 线条的宽度, 即:数据集
    datasetStrokeWidth : 2,

    // 是否填充数据集
    datasetFill : false,

    // 是否执行动画
    animation : true,

    // 动画的时间
    animationSteps : 60,

    // 动画的特效
    animationEasing : "easeOutQuart",

    // 动画完成时的执行函数
    onAnimationComplete : null

}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, defaults);
PS: canvas的高度跟宽度决定Y轴的坐标

highcharts 入门

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/exporting.js"></script>
        <title>Document</title>
        <script type="text/javascript">
            $(function() {
                var HJSON = {
                    title: {
                        text: '我是主标题',
                        x: -20, //center
                        style: { //此处设置设置CSS样式
                            color: 'red',
                            fontSize: '16px'
                        }
                    },
                    subtitle: {
                        text: '副标题',
                        x: -20,
                        style: { //此处设置设置CSS样式
                            color: 'blue',
                            fontSize: '16px'
                        }
                    },
                    xAxis: { //配置要在 X 轴显示的项。
                        title: {
                            text: '我是X轴 (月)',
                            style: { //此处设置设置CSS样式
                                color: '#551A8B',
                                fontSize: '16px'
                            }
                        },
                        gridLineColor: "yellow", //网格（竖线）颜色
                        gridLineWidth: "3", //网格(竖线)宽度
                        lineColor: "#8B1A1A", //基线颜色
                        lineWidth: "2", //基线宽度
                        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    },
                    yAxis: { //配置要在 Y 轴显示的项。
                        title: {
                            text: 'Temperature (°C)'
                        },
                        gridLineColor: "green", //网格（竖线）颜色
                        gridLineWidth: "10", //网格(竖线)宽度
                        lineColor: "blue", //基线颜色
                        lineWidth: "5", //基线宽度
                        plotLines: [{
                            value: 0,
                            width: 100,
                            color: '#FF0000' //红色
                        }]
                    },
                    tooltip: { //悬浮配置提示信息
                        valueSuffix: '°C(摄氏度)'
                    },
                    legend: { //配置图表向右对齐
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0,
                        borderColor: '#EE1289',
                        backgroundColor: '#EEB422'
                    },
                    series: [{
                        name: 'Tokyo',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }, {
                        name: 'New York',
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    }, {
                        name: 'Berlin',
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    }, {
                        name: 'London',
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }, {
                        name: 'beijin',
                        data: [13.9, 4.2, 25.7, 28.5, 11.9, 15.2, 9.0, 16.6, 5.2, 10.3, 6.6, 24.8]
                    }]
                };
                Highcharts.backgroundColor = 'yellow';
                Highcharts.setOptions({
                    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
                        '#FFF263', '#6AF9C4'
                    ]
                });
                HJSON.title.text = "*我是主标题*";
                $('#container1').highcharts(HJSON);
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                var title = {
                    text: '城市平均气温'
                };
                var subtitle = {
                    text: 'Source: runoob.com'
                };
                var xAxis = {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                    ]
                };
                var yAxis = {
                    title: {
                        text: 'Temperature (\xB0C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                };
                var tooltip = {
                    valueSuffix: '\xB0C'
                }
                var legend = {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                };
                var series = [{
                    name: 'Tokyo',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                        26.5, 23.3, 18.3, 13.9, 9.6
                    ]
                }, {
                    name: 'New York',
                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                        24.1, 20.1, 14.1, 8.6, 2.5
                    ]
                }, {
                    name: 'London',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
                        16.6, 14.2, 10.3, 6.6, 4.8
                    ]
                }];
                var json = {};
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.legend = legend;
                json.series = series;
                $('#container2').highcharts(json);
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                var chart = {
                    zoomType: 'x'
                };
                var title = {
                    text: 'USD to EUR exchange rate from 2006 through 2008'
                };
                var subtitle = {
                    text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                };
                var xAxis = {
                    type: 'datetime',
                    minRange: 14 * 24 * 3600000 // 14 天
                };
                var yAxis = {
                    title: {
                        text: 'Exchange rate'
                    }
                };
                var legend = {
                    enabled: false
                };
                var plotOptions = {
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                };
                var series = [{
                    type: 'area',
                    name: 'USD to EUR',
                    pointInterval: 24 * 3600 * 1000,
                    pointStart: Date.UTC(2006, 0, 1),
                    data: [
                        0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
                        0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
                        0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269,
                        0.8269, 0.8258, 0.8247, 0.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357,
                        0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384,
                        0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
                        0.838, 0.8373, 0.8316, 0.8303, 0.8303, 0.8302, 0.8369, 0.84, 0.8385, 0.84,
                        0.8401, 0.8402, 0.8381, 0.8351, 0.8314, 0.8273, 0.8213, 0.8207, 0.8207, 0.8215,
                        0.8242, 0.8273, 0.8301, 0.8346, 0.8312, 0.8312, 0.8312, 0.8306, 0.8327, 0.8282,
                        0.824, 0.8255, 0.8256, 0.8273, 0.8209, 0.8151, 0.8149, 0.8213, 0.8273, 0.8273,
                        0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,
                        0.8101, 0.8119, 0.8107, 0.8105, 0.8084, 0.8069, 0.8047, 0.8023, 0.7965, 0.7919,
                        0.7921, 0.7922, 0.7934, 0.7918, 0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,
                        0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,
                        0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845,
                        0.7798, 0.7777, 0.7822, 0.7785, 0.7744, 0.7743, 0.7726, 0.7766, 0.7806, 0.785,
                        0.7907, 0.7912, 0.7913, 0.7931, 0.7952, 0.7951, 0.7928, 0.791, 0.7913, 0.7912,
                        0.7941, 0.7953, 0.7921, 0.7919, 0.7968, 0.7999, 0.7999, 0.7974, 0.7942, 0.796,
                        0.7969, 0.7862, 0.7821, 0.7821, 0.7821, 0.7811, 0.7833, 0.7849, 0.7819, 0.7809,
                        0.7809, 0.7827, 0.7848, 0.785, 0.7873, 0.7894, 0.7907, 0.7909, 0.7947, 0.7987,
                        0.799, 0.7927, 0.79, 0.7878, 0.7878, 0.7907, 0.7922, 0.7937, 0.786, 0.787,
                        0.7838, 0.7838, 0.7837, 0.7836, 0.7806, 0.7825, 0.7798, 0.777, 0.777, 0.7772,
                        0.7793, 0.7788, 0.7785, 0.7832, 0.7865, 0.7865, 0.7853, 0.7847, 0.7809, 0.778,
                        0.7799, 0.78, 0.7801, 0.7765, 0.7785, 0.7811, 0.782, 0.7835, 0.7845, 0.7844,
                        0.782, 0.7811, 0.7795, 0.7794, 0.7806, 0.7794, 0.7794, 0.7778, 0.7793, 0.7808,
                        0.7824, 0.787, 0.7894, 0.7893, 0.7882, 0.7871, 0.7882, 0.7871, 0.7878, 0.79,
                        0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,
                        0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,
                        0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994,
                        0.7976, 0.7977, 0.796, 0.7922, 0.7928, 0.7929, 0.7948, 0.797, 0.7953, 0.7907,
                        0.7872, 0.7852, 0.7852, 0.786, 0.7862, 0.7836, 0.7837, 0.784, 0.7867, 0.7867,
                        0.7869, 0.7837, 0.7827, 0.7825, 0.7779, 0.7791, 0.779, 0.7787, 0.78, 0.7807,
                        0.7803, 0.7817, 0.7799, 0.7799, 0.7795, 0.7801, 0.7765, 0.7725, 0.7683, 0.7641,
                        0.7639, 0.7616, 0.7608, 0.759, 0.7582, 0.7539, 0.75, 0.75, 0.7507, 0.7505,
                        0.7516, 0.7522, 0.7531, 0.7577, 0.7577, 0.7582, 0.755, 0.7542, 0.7576, 0.7616,
                        0.7648, 0.7648, 0.7641, 0.7614, 0.757, 0.7587, 0.7588, 0.762, 0.762, 0.7617,
                        0.7618, 0.7615, 0.7612, 0.7596, 0.758, 0.758, 0.758, 0.7547, 0.7549, 0.7613,
                        0.7655, 0.7693, 0.7694, 0.7688, 0.7678, 0.7708, 0.7727, 0.7749, 0.7741, 0.7741,
                        0.7732, 0.7727, 0.7737, 0.7724, 0.7712, 0.772, 0.7721, 0.7717, 0.7704, 0.769,
                        0.7711, 0.774, 0.7745, 0.7745, 0.774, 0.7716, 0.7713, 0.7678, 0.7688, 0.7718,
                        0.7718, 0.7728, 0.7729, 0.7698, 0.7685, 0.7681, 0.769, 0.769, 0.7698, 0.7699,
                        0.7651, 0.7613, 0.7616, 0.7614, 0.7614, 0.7607, 0.7602, 0.7611, 0.7622, 0.7615,
                        0.7598, 0.7598, 0.7592, 0.7573, 0.7566, 0.7567, 0.7591, 0.7582, 0.7585, 0.7613,
                        0.7631, 0.7615, 0.76, 0.7613, 0.7627, 0.7627, 0.7608, 0.7583, 0.7575, 0.7562,
                        0.752, 0.7512, 0.7512, 0.7517, 0.752, 0.7511, 0.748, 0.7509, 0.7531, 0.7531,
                        0.7527, 0.7498, 0.7493, 0.7504, 0.75, 0.7491, 0.7491, 0.7485, 0.7484, 0.7492,
                        0.7471, 0.7459, 0.7477, 0.7477, 0.7483, 0.7458, 0.7448, 0.743, 0.7399, 0.7395,
                        0.7395, 0.7378, 0.7382, 0.7362, 0.7355, 0.7348, 0.7361, 0.7361, 0.7365, 0.7362,
                        0.7331, 0.7339, 0.7344, 0.7327, 0.7327, 0.7336, 0.7333, 0.7359, 0.7359, 0.7372,
                        0.736, 0.736, 0.735, 0.7365, 0.7384, 0.7395, 0.7413, 0.7397, 0.7396, 0.7385,
                        0.7378, 0.7366, 0.74, 0.7411, 0.7406, 0.7405, 0.7414, 0.7431, 0.7431, 0.7438,
                        0.7443, 0.7443, 0.7443, 0.7434, 0.7429, 0.7442, 0.744, 0.7439, 0.7437, 0.7437,
                        0.7429, 0.7403, 0.7399, 0.7418, 0.7468, 0.748, 0.748, 0.749, 0.7494, 0.7522,
                        0.7515, 0.7502, 0.7472, 0.7472, 0.7462, 0.7455, 0.7449, 0.7467, 0.7458, 0.7427,
                        0.7427, 0.743, 0.7429, 0.744, 0.743, 0.7422, 0.7388, 0.7388, 0.7369, 0.7345,
                        0.7345, 0.7345, 0.7352, 0.7341, 0.7341, 0.734, 0.7324, 0.7272, 0.7264, 0.7255,
                        0.7258, 0.7258, 0.7256, 0.7257, 0.7247, 0.7243, 0.7244, 0.7235, 0.7235, 0.7235,
                        0.7235, 0.7262, 0.7288, 0.7301, 0.7337, 0.7337, 0.7324, 0.7297, 0.7317, 0.7315,
                        0.7288, 0.7263, 0.7263, 0.7242, 0.7253, 0.7264, 0.727, 0.7312, 0.7305, 0.7305,
                        0.7318, 0.7358, 0.7409, 0.7454, 0.7437, 0.7424, 0.7424, 0.7415, 0.7419, 0.7414,
                        0.7377, 0.7355, 0.7315, 0.7315, 0.732, 0.7332, 0.7346, 0.7328, 0.7323, 0.734,
                        0.734, 0.7336, 0.7351, 0.7346, 0.7321, 0.7294, 0.7266, 0.7266, 0.7254, 0.7242,
                        0.7213, 0.7197, 0.7209, 0.721, 0.721, 0.721, 0.7209, 0.7159, 0.7133, 0.7105,
                        0.7099, 0.7099, 0.7093, 0.7093, 0.7076, 0.707, 0.7049, 0.7012, 0.7011, 0.7019,
                        0.7046, 0.7063, 0.7089, 0.7077, 0.7077, 0.7077, 0.7091, 0.7118, 0.7079, 0.7053,
                        0.705, 0.7055, 0.7055, 0.7045, 0.7051, 0.7051, 0.7017, 0.7, 0.6995, 0.6994,
                        0.7014, 0.7036, 0.7021, 0.7002, 0.6967, 0.695, 0.695, 0.6939, 0.694, 0.6922,
                        0.6919, 0.6914, 0.6894, 0.6891, 0.6904, 0.689, 0.6834, 0.6823, 0.6807, 0.6815,
                        0.6815, 0.6847, 0.6859, 0.6822, 0.6827, 0.6837, 0.6823, 0.6822, 0.6822, 0.6792,
                        0.6746, 0.6735, 0.6731, 0.6742, 0.6744, 0.6739, 0.6731, 0.6761, 0.6761, 0.6785,
                        0.6818, 0.6836, 0.6823, 0.6805, 0.6793, 0.6849, 0.6833, 0.6825, 0.6825, 0.6816,
                        0.6799, 0.6813, 0.6809, 0.6868, 0.6933, 0.6933, 0.6945, 0.6944, 0.6946, 0.6964,
                        0.6965, 0.6956, 0.6956, 0.695, 0.6948, 0.6928, 0.6887, 0.6824, 0.6794, 0.6794,
                        0.6803, 0.6855, 0.6824, 0.6791, 0.6783, 0.6785, 0.6785, 0.6797, 0.68, 0.6803,
                        0.6805, 0.676, 0.677, 0.677, 0.6736, 0.6726, 0.6764, 0.6821, 0.6831, 0.6842,
                        0.6842, 0.6887, 0.6903, 0.6848, 0.6824, 0.6788, 0.6814, 0.6814, 0.6797, 0.6769,
                        0.6765, 0.6733, 0.6729, 0.6758, 0.6758, 0.675, 0.678, 0.6833, 0.6856, 0.6903,
                        0.6896, 0.6896, 0.6882, 0.6879, 0.6862, 0.6852, 0.6823, 0.6813, 0.6813, 0.6822,
                        0.6802, 0.6802, 0.6784, 0.6748, 0.6747, 0.6747, 0.6748, 0.6733, 0.665, 0.6611,
                        0.6583, 0.659, 0.659, 0.6581, 0.6578, 0.6574, 0.6532, 0.6502, 0.6514, 0.6514,
                        0.6507, 0.651, 0.6489, 0.6424, 0.6406, 0.6382, 0.6382, 0.6341, 0.6344, 0.6378,
                        0.6439, 0.6478, 0.6481, 0.6481, 0.6494, 0.6438, 0.6377, 0.6329, 0.6336, 0.6333,
                        0.6333, 0.633, 0.6371, 0.6403, 0.6396, 0.6364, 0.6356, 0.6356, 0.6368, 0.6357,
                        0.6354, 0.632, 0.6332, 0.6328, 0.6331, 0.6342, 0.6321, 0.6302, 0.6278, 0.6308,
                        0.6324, 0.6324, 0.6307, 0.6277, 0.6269, 0.6335, 0.6392, 0.64, 0.6401, 0.6396,
                        0.6407, 0.6423, 0.6429, 0.6472, 0.6485, 0.6486, 0.6467, 0.6444, 0.6467, 0.6509,
                        0.6478, 0.6461, 0.6461, 0.6468, 0.6449, 0.647, 0.6461, 0.6452, 0.6422, 0.6422,
                        0.6425, 0.6414, 0.6366, 0.6346, 0.635, 0.6346, 0.6346, 0.6343, 0.6346, 0.6379,
                        0.6416, 0.6442, 0.6431, 0.6431, 0.6435, 0.644, 0.6473, 0.6469, 0.6386, 0.6356,
                        0.634, 0.6346, 0.643, 0.6452, 0.6467, 0.6506, 0.6504, 0.6503, 0.6481, 0.6451,
                        0.645, 0.6441, 0.6414, 0.6409, 0.6409, 0.6428, 0.6431, 0.6418, 0.6371, 0.6349,
                        0.6333, 0.6334, 0.6338, 0.6342, 0.632, 0.6318, 0.637, 0.6368, 0.6368, 0.6383,
                        0.6371, 0.6371, 0.6355, 0.632, 0.6277, 0.6276, 0.6291, 0.6274, 0.6293, 0.6311,
                        0.631, 0.6312, 0.6312, 0.6304, 0.6294, 0.6348, 0.6378, 0.6368, 0.6368, 0.6368,
                        0.636, 0.637, 0.6418, 0.6411, 0.6435, 0.6427, 0.6427, 0.6419, 0.6446, 0.6468,
                        0.6487, 0.6594, 0.6666, 0.6666, 0.6678, 0.6712, 0.6705, 0.6718, 0.6784, 0.6811,
                        0.6811, 0.6794, 0.6804, 0.6781, 0.6756, 0.6735, 0.6763, 0.6762, 0.6777, 0.6815,
                        0.6802, 0.678, 0.6796, 0.6817, 0.6817, 0.6832, 0.6877, 0.6912, 0.6914, 0.7009,
                        0.7012, 0.701, 0.7005, 0.7076, 0.7087, 0.717, 0.7105, 0.7031, 0.7029, 0.7006,
                        0.7035, 0.7045, 0.6956, 0.6988, 0.6915, 0.6914, 0.6859, 0.6778, 0.6815, 0.6815,
                        0.6843, 0.6846, 0.6846, 0.6923, 0.6997, 0.7098, 0.7188, 0.7232, 0.7262, 0.7266,
                        0.7359, 0.7368, 0.7337, 0.7317, 0.7387, 0.7467, 0.7461, 0.7366, 0.7319, 0.7361,
                        0.7437, 0.7432, 0.7461, 0.7461, 0.7454, 0.7549, 0.7742, 0.7801, 0.7903, 0.7876,
                        0.7928, 0.7991, 0.8007, 0.7823, 0.7661, 0.785, 0.7863, 0.7862, 0.7821, 0.7858,
                        0.7731, 0.7779, 0.7844, 0.7866, 0.7864, 0.7788, 0.7875, 0.7971, 0.8004, 0.7857,
                        0.7932, 0.7938, 0.7927, 0.7918, 0.7919, 0.7989, 0.7988, 0.7949, 0.7948, 0.7882,
                        0.7745, 0.771, 0.775, 0.7791, 0.7882, 0.7882, 0.7899, 0.7905, 0.7889, 0.7879,
                        0.7855, 0.7866, 0.7865, 0.7795, 0.7758, 0.7717, 0.761, 0.7497, 0.7471, 0.7473,
                        0.7407, 0.7288, 0.7074, 0.6927, 0.7083, 0.7191, 0.719, 0.7153, 0.7156, 0.7158,
                        0.714, 0.7119, 0.7129, 0.7129, 0.7049, 0.7095
                    ]
                }];
                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.legend = legend;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                $('#container3').highcharts(json);
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                var chart = {
                    type: 'bar'
                };
                var title = {
                    text: 'Historic World Population by Region'
                };
                var subtitle = {
                    text: 'Source: Wikipedia.org'
                };
                var xAxis = {
                    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                    title: {
                        text: null
                    }
                };
                var yAxis = {
                    min: 0,
                    title: {
                        text: 'Population (millions)',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                };
                var tooltip = {
                    valueSuffix: ' millions'
                };
                var plotOptions = {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                };
                var legend = {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                    shadow: true
                };
                var credits = {
                    enabled: false
                };
                var series = [{
                    name: 'Year 1800',
                    data: [107, 31, 635, 203, 2]
                }, {
                    name: 'Year 1900',
                    data: [133, 156, 947, 408, 6]
                }, {
                    name: 'Year 2008',
                    data: [973, 914, 4054, 732, 34]
                }];
                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.tooltip = tooltip;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                json.legend = legend;
                json.credits = credits;
                $('#container5').highcharts(json);
            });
        </script>
    </head>

    <body>
        <div id="container1" style="width:800px;height:400px;border: 1px solid red;"></div>
        <div id="container2" style="width:800px;height:400px;border: 1px solid red;"></div>
        <div id="container3" style="width:800px;height:400px;border: 1px solid red;"></div>
        <div id="container4" style="width:800px;height:400px;border: 1px solid red;"></div>
        <div id="container5" style="width:800px;height:400px;border: 1px solid red;"></div>
    </body>

</html>
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
usage-monitor:使用 Node.js、Socket.io 和 Highcharts 实时流式传输 CPU 和内存
06-14
使用监控 使用 Node.js、Socket.io 和 Highcharts 实时流式传输 CPU 和内存。 安装 安装 安装项目依赖： npm install 运行： node app.js 默认情况下，服务器侦听端口 3000
Highcharts介绍及vue示例
ppp80的专栏
06-29 8030
 Highcharts 是一款用纯JavaScript编写的一个图表库，使用非常简单。而且官网提供了大量的示例，这些示例可以直接复制到自己的代码中，只需要按自己的业务要求绑定数据即可。    和其他图表控件比较，Highcharts是经过多年的开发和维护拥有着丰富的图表功能，有稳定的性能以及专业详细的开发文档，上手极其容易，而且图表展现出来也是非常的美观简约。另外HighCharts还有很好的兼容...
Highcharts引入
最新发布
哈哈
08-12 256
然后全选复制到自己新建的txt文档中，最后把扩展名改为js。，然后全选复制到自己新建的txt文档中，最后把扩展名改为js。并在HTML文件的头部引用。
关于Highcharts.js图表库的使用与举例
前端-尔嵘
08-06 1150
第一部分关于Highcharts.js图表库： 1、简介：Highcharts是一款纯javascript编写的图表库，能够在Web网站或Web应用中添加交互性的图表，现在官方的最新版本为API 文档更新到 5.0.7啦。 2、图表类型丰富： 1 曲线图 2 区域图 3 饼图 4 散点图 5 气泡图 6 动态图表 7 组合图表...
纯JavaScript编写的图表库—Highcharts
wuww18stu的博客
09-28 701
纯JavaScript编写的图表库—Highcharts 微信公众号：前端程序猿之路关注可了解更多的前端知识，反馈问题或建议，请公众号留言。如果你觉得公众号内容对你有帮助，欢迎关注并转载 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,Highcharts 免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型：曲线图、区域图、饼图、散点图、气泡图、动态图表、组
java js highcharts_JS图表组件 highcharts 简单的介绍
weixin_33555586的博客
02-24 262
把highcharts拿来做个简单的介绍，希望更多的朋友可以用到这个用来做图表的js插件。preparationHighchartsHighcharts是一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对个人用户完全免费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：...
HighCharts.js使用总结
Auto Testing Blog
05-18 2076
HighCharts.js使用总结1. 图例相关(legend) 隐藏某个数据列的图例 单独设置图例的文字说明 设置图例显示checkbox并重写其监听事件 重写图例的点击事件 自定义坐标轴的刻度单位
java js highcharts_Highcharts.js －纯javasctipt图表库初体验
weixin_35591736的博客
02-24 143
一.highcharts简介以及引入highcharts作为免费提供给个人学习、个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便。在我最近完成一个需求的时候用到了它， 它的兼容性也很强，其在标准(W3C标准)浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。我们在使用highcharts的时候只需要引入highcharts.js及 jQuery 、 M...
vue3-highcharts:Highcharts.js的Vue 3组件包装器
05-10
一个简单，快速的Vue 3组件，用于呈现使用composition API编写的Highcharts.js图表​​。 演示 最低要求 [email protected] Highcharts@8.0.0（较旧的版本可能有效，但未经测试） Vue和Highcharts未与模块捆绑在一起，...
chartjs-scatter:Chart.js中的散点图（模板）
05-16
请参阅Jack Dougherty和Ilya Ilyankou撰写的的第10章：Chart.js和Highcharts模板。 data.csv需要包含3列：x值，y值和每个数据点的名称。 在script.js ，您可以自定义下面的代码片段中显示的变量的值。 有关更多...
highcharts-zh_CN.js
06-14
highcharts中文转换js能够将英文转换为中文。 Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
highChart包（含HighCharts.js,可引用设置折线图、柱状图、饼图等）
03-12
含HighCharts.js文档，可用于引用设计折线图、柱状图、饼图等
highcharts的js文件
12-17
highcharts的js文件，highcharts生成柱状图或曲线图时需要引入的。
highcharts.js实现曲线图、柱状图、面积图等
04-24
做数据的图标显示，适合用highcharts.js插件来实现，可以做曲线图、柱状图、面积图等
highcharts.js文件下载
07-17
highcharts.js源文件下载，提供highcharts.js文件下载
highcharts-zh_CN.js 文件下载
01-18
highcharts、highstock常用图表格式化工具文件，官网例子：https://www.hcharts.cn/demo/highstock/basic-line
highcharts.js数据绑定方式代码实例
10-15
主要介绍了highcharts.js数据绑定方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
基于highcharts.js多条曲线（或柱状）动态图（时序图）
ccfeng
04-29 9627
Highcharts 是一个用纯JavaScript编写的一个图表库，在web前端展示中可以做出很炫的图表，目前手头有一个指标监控项目，需要采用动态展示(典型XY曲线，时间轴)。贡献出一个例子供大家参考。    实现的方法：由于指标显示不尽一致，例如有些是CPU时间，交易量，等等。但又有一些相似之处，如都是XY型（时间为X），都包含基线（多条曲线）等，基于这种特征，需要写一个通用的接口，方便多指
hicharts.js基本设置和自定义样式
银鞍照白马的博客
10-22 706
hicharts.js的优势 兼容ie6以上浏览器 完美支持移动端 api全面而丰富 自适应浏览器宽度 实例演示基础折线图 html部分 &amp;amp;amp;lt;!--引入hicharts.js框架的提供的js文件--&amp;amp;amp;gt; &amp;amp;amp;lt;script src=&amp;amp;quot;https://img.hcharts.cn/highcharts/highcharts.js&amp;a
Highcharts.js的使用
06-03
Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'My Chart' }, series: [{ name: 'My Data', data: [1, 2, 3, 4, 5] }] }); ``` 这个例子创建了一个柱状图，并将其绑定到id为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值