Question

我无法在页面加载时禁用c3 js图表图例元素。（在图表的配置中）。另外，我还要求根据复选框值启用/禁用图表图例元素。尝试在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中，每个系列的图例可以显示/隐藏为

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

用y个数据系列之一替换“系列ID”，例如您的情况下为“数据1”。

下面的工作片段是基于图表配置的纯JS版本。复选框显示可以轻松隐藏和显示每个系列的图例。如果您需要帮助来了解click事件，请告诉我-它所做的只是捕捉复选框的更改，并根据状态显示或隐藏具有匹配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>

在C3 Js图表中的页面首次加载时启用/禁用图例元素。此外，管理图例元素会根据复选框的值启用/禁用

1 个答案: