zoukankan      html  css  js  c++  java
  • Highchartsjs使用总结及实时动态刷新图

    柱状图:
    $('#container').highcharts({
    //突显红色柱;
    series: [ 523, 345, 785, 565, 843,{'color': 'red','y': 300},726, 590, 665, 434, 312, 432]
    })
    饼图、环型图:
    $('#container').highcharts({
    //百分比环形图;
    plotOptions:{
    pie: {
    innerSize: 140,//等于0时,为饼图;
    allowPointSelect: true,
    cursor: 'pointer',
    colors: [
    "#f44a36","#4879df",#21c393",#fad567"
    ]
    }
    }
    })
    动态实时刷新曲线图(setInterval(放入动态数据),1000);
    Highcharts选项配置详细说明文档
    Highcharts API官方文档

    //蜘蛛图
    $('#container').highcharts({
    yAxis: {
    gridLinInterpolation: 'polygon',
    min: 0,
    tickInterval: 1,
    max: 5,
    gridLineColor: '#000000',
    lineColor: '#000000',//背景颜色;
    labels: {
    enabled: false
    }
    },
    //隐藏图标头;
    title: {
    text: '',
    x: -80
    },
    //隐藏logo水印;
    credits: {
    enabled: false,
    },
    //隐藏注释图标;
    legend: {
    enabled: false
    },//图表的打印及导出功能失效
    exporting:{
    enabled:false
    },
    //更换颜色;
    series: [{
    name: '',
    data: charInfo,
    //color:'#ff0000';//线条颜色
    }]
    });
    //百分比堆积柱状图:
    $('#container').highcharts({
    //百分比柱状图颜色;
    chart: {
    type: 'bar' //bar垂直;column水平;
    },
    plotOptions: {
    bar: { //上下对应;
    stacking: 'percent'
    },
    },
    });

  • 相关阅读:
    第四阶段学习总结
    第三阶段学习总结
    第二阶段学习总结
    第一阶段内容的学习总结
    第四单元及OO课程总结
    关于工具的碎碎念
    第三单元博客总结
    第二单元博客总结
    第一单元作业总结
    实验五 单元测试
  • 原文地址:https://www.cnblogs.com/yancongyang/p/9287730.html
Copyright © 2011-2022 走看看