• highcharts中的折线图


    折现图表的样式如下所示:

     整体的一个设置代码如下:

    that.options = {
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        yAxis: {
            title: {
                text: null
            },
            gridLineColor: '#29304d',
            // y轴的网格线
            lineColor: '#29304d',
            // y轴的竖线
            lineWidth: that.torem(2),
            // 要加上线宽才可以出来
            labels: { // y轴的文字
                style: {
                    color: '#fff',
                    fontSize: that.torem(28)
                }
            }
        },
        xAxis: {
            alternateGridColor: '#152e55',
            // 隔行变色
            lineColor: '#29304d',
            labels: { // x轴的文字
                style: {
                    color: '#fff',
                    fontSize: that.torem(28)
                }
            },
            tickWidth: 0,
            // 去掉刻度线
            categories: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'] // x轴的数据
        },
        chart: {
            backgroundColor: 'transparent',
            color: '#fff'
        },
        legend: { // 图例的设置
            layout: 'horizontal',
            // 水平排列
            align: 'right',
            // 右对齐
            verticalAlign: 'top',
            // 纵向位于上方
            padding: 0,
            itemStyle: {
                color: '#fff',
                fontSize: that.torem(28)
            },
            symbolHeight: that.torem(96),
            symbolWidth: that.torem(48),
            symbolRadius: that.torem(24)
        },
        plotOptions: {
            series: {
                // label: {
                //     connectorAllowed: false
                // },
                marker: { // 折线图中的点设置,默认是原形,三角和正方形
                    // fillColor: '#FFFFFF',
                    lineWidth: that.torem(2),
                    lineColor: '#fff',
                    // inherit from series
                     that.torem(80),
                    height: that.torem(80),
                    symbol: 'circle',
                    // circle会取消默认设置,所有的折线上的点都变成circle
                    radius: that.torem(8)
                },
                lineWidth: that.torem(8)
            }
        },
        colors: ['#296efe', '#13c792', '#dba630'],
        // 折线的颜色
        series: seriesArr
    };

     y轴的 gridLineColor 设置的颜色

      y轴的 lineColor 设置的颜色

     x轴的背景alternateGridColor隔行变色

     x轴的刻度线 tickWidth 如果不想要,值就设置成0

  • 相关阅读:
    青城的另一个一夜/情
    SystemProperties.get/set property_get/set
    锁——Java同步的基本思想
    CMUSphinx Learn
    猜数字
    我的音乐我的电影
    动态规划_钢条切割问题
    directdraw显示yuv420(YV12)
    Redis 命令参考
    HDU 3078 LCA转RMQ
  • 原文地址:https://www.cnblogs.com/florazeng/p/13784423.html
Copyright © 2020-2023  润新知