Enable/Disable C3 Js 图表中首次加载页面时的图例元素。此外，根据复选框值管理图例元素 enable/disable

Question

我无法在页面加载时禁用 c3 js 图表图例元素。（在图表的配置中）。另外，我需要根据复选框值 enable/disable 图表图例元素。尝试在 c3 js 文档中查找但找不到。

                 $scope.cpuChartArea = {
            data: {
                x: 'x',
                columns: [
                    xLabels,
                    data1,
                    data2,
                    data3
                ],
                xFormat: '%m-%d-%Y %H:%M:%S',
                types: {
                    'data 1': 'area-spline',
                    'data 2': 'area-spline',
                    'data 3': 'area-spline',

                }
            },
            point: {
                show: false
            },
            axis: {
                y: {
                    tick: {
                        format: function (d) { return d + "%"; }
                    }
                },
                x: {
                    type: 'timeseries',
                    tick: {
                        //format: function (x) { return x.getFullYear(); }
                        format: '%H:%M' // format string is also available for timeseries data
                    }
                }
            },
            tooltip:{
                format:{
                    title:function (x) { return x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear() + " " + x.getHours()+ ":" + x.getMinutes() },
                }
            }
        }

Answer 1

我知道你正在使用 Angular，但在普通 JS 中，每个系列的图例可以 shown/hidden 为

chart.legend.show('series id');

将 'series id' 替换为您的 y 数据系列之一，例如 'data 1' 在您的情况下。

下面的工作代码段是基于您的图表配置的纯 JS 版本。复选框显示每个系列的图例可以轻松隐藏和显示。如果您在理解点击事件时需要帮助，请告诉我 - 它所做的只是捕获对复选框的更改，并根据状态显示或隐藏具有匹配 ID 的系列的图例。

我希望您可以根据您的 Angular 情况调整本学习内容。

var chart = c3.generate(
{
    bindto: '#chart',
    size: {
      width: 600,
      height: 140
    },
  data: {
    x: 'xLabels',
    columns: [
      ['xLabels', '2015-09-17 18:20:34','2015-09-17 18:25:42','2015-09-17 18:30:48'],
     ['data 1', 5,10,12],
     ['data 2', 4,13,17],
    ],
    xFormat: '%Y-%m-%d %H:%M:%S', // ### IMPORTANT - this is how d3 understands the date formatted in the xLabels array. If you do not alter this to match your data format then the x axis will not plot! 
    types: {
      'data 1': 'area-spline',
      'data 2': 'area-spline'
    }
  },
  point: {
    show: false
    
  },
  legend: {
      position: 'inset',
  inset: {
      anchor: 'top-left',
      x: 20,
      y: 10,
      step: 2
    }
  },
  axis: {
    y: {
      tick: {
        format: function (d) { return d + "%"; }
      }
    },
    x: {
      type: 'timeseries',
      tick: {
        //format: function (x) { return x.getFullYear(); }
        //format: '%H:%M' // format string is also available for timeseries data
        format: '%Y-%m-%d %H:%M:%S' // how the date is displayed
      }
    }
  }, 
  tooltip:{
    format:{
      title:function (x) { return x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear() + " " + x.getHours()+ ":" + x.getMinutes() },
    }
  }  
})

// this is all about toggling the legends.
$('.checkBox').on('change', function(e){

  if ( $(this).prop('checked')){
    chart.legend.show($(this).attr('id'))
  }
  else {
    chart.legend.hide($(this).attr('id'))
  }

})

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>

<p>Show legends: <label for='data 1'> data 1 </label><input type='checkbox' class='checkBox' id='data 1' checked='true'/><label for='data 2'>data 2 </label><input type='checkbox' class='checkBox' id='data 2' checked='true'/>  </p>

<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>

Enable/Disable C3 Js 图表中首次加载页面时的图例元素。此外，根据复选框值管理图例元素 enable/disable

Enable/Disable legend elements on first load of page in C3 Js chart. Also, managing legend elements enable/disable on the basis of checkbox value

javascript

charts

angularjs

c3.js