zoukankan      html  css  js  c++  java
  • Highcharts 点击多选框取消,添加数据上绑定最大,最小值和图例上绑定提示框数据

    // 自定义图例
     <div class="left">
                    <el-checkbox-group v-model="checkList" @change="changCheck">
                        <el-checkbox v-for="item in legendData" :label="item.index" :key="item.index" @change="handleCheck($event,item.index, item.name)">{{item.name}}<span class="legendNum" :style="{color: item.color}">{{item.legendNum}}</span></el-checkbox>
                    </el-checkbox-group>
                </div>
    import Highcharts from 'highcharts'; 
    import annotations from 'highcharts/modules/annotations';  // 主要引入annotations
     
    当鼠标移在图上移动图例上也显示当前值
    Highcharts  图例提示框代码
    tooltip: {
                                    useHTML: true,
                                    backgroundColor: '#fff',
                                    borderWidth: 0,
                                    valueDecimals: 2,
                                    shared: true, // 提示框显示所有数据
                                    formatter: function () {
                                        // 图例右侧数据
                                        this.points.map((item) => {
                                            that.$set(that.legendData[i],'legendNum',item.y)   // 主要这段
                                        })
                                        return tooltip(this.points);
                                    }
                                },
     
    //  点击按钮取消、添加最大,最小值  绑定id
    chartSetMaxMinCheck(type) {
                    console.log(type)
                    if(type) {
                        this.chartData.map(item => {
                            item.addAnnotation( {
                                id: 'max',
                                labels: [{
                                    point: {
                                        xAxis: 0,
                                        yAxis: 0,
                                        x: 1609257600000,   // 我的图表x轴是时间,1609257600000是时间戳
                                        y: 0
                                    },
                                    text: 'min value'
                                }]})
                        })
                    } else {
                        this.chartData.map(item => {
                            item.removeAnnotation('max');
                        })
                    }
                },
  • 相关阅读:
    GridView的TemplateField
    数据源绑定
    hihocoder-1415 后缀数组三·重复旋律3 两个字符串的最长公共子串
    hihocoder-1407 后缀数组二·重复旋律2 不重合 最少重复K次
    hdu number number number 斐波那契数列 思维
    最长上升子序列 nlogn
    hdu-4507 吉哥系列故事——恨7不成妻 数位DP 状态转移分析/极限取模
    hdu-3652 B-number 数位DP
    hdu-2089 不要62 基础DP 模板
    字符串hash
  • 原文地址:https://www.cnblogs.com/whlBooK/p/15619903.html
Copyright © 2011-2022 走看看