Chart.js - 加载后使用标签字符串隐藏行-Java 学习之路

使用chart.js，我有一个折线图，显示在.net网络应用程序中编译的数据集 .

根据标签名称，是否可以在加载数据后将行设置为隐藏/禁用？

chart.js中有一个hidden flag，可以在加载时隐藏数据集，但这在最初定义数据集时设置 . 由于数据已在视图中定义，因此我无法使用此标志 . 例如 .

var viewsByMonthChartCtx = new Chart(viewsByMonthChartCtx, {
        type: 'line',
        data: {
            labels: ['February 2017','March 2017'],
            datasets: 
                 [ { label: 'Home', data: [100,120 ] }, // I want to set 'hidden: true' to the Home dataset post initialization
                   { label: 'Search', data: [200,240 ] } ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
        }
    });

1 回答

如果要在初始化（和渲染）图表后隐藏数据集，则仍使用数据集 hidden: true 属性 . 您只需从图表实例访问数据集并将该属性设置为true即可 .

以下是在页面加载后5秒隐藏与标签匹配的数据集的示例 .

// the dataset label we want to hide after chart is initialized
var hiddenLabel = 'My Second Dataset';
var timerDuration = 5;

// hide a dataset after X seconds
setTimeout(function() {
  var indexToHide = -1;  

  // find which dataset matches the label we want to hide
  myLine.config.data.datasets.forEach(function(e, i) {
    if (e.label === hiddenLabel) {
      indexToHide = i;
    }
  });

  // get the dataset meta object so we can hide it
  var meta = myLine.getDatasetMeta(indexToHide);

  // hide the dataset and re-render the chart
  meta.hidden = true;
  myLine.update();
}, timerDuration * 1000);

如您所见，您可以迭代数据集以查找具有匹配标签的数据集的索引，然后您只需将hidden属性设置为true并更新图表 .

这是一个codepen，演示了一个完整的工作示例 .

有了这个说，不清楚为什么你会想隐藏图表后这样做 . 如果您已经知道要在页面加载时隐藏哪个数据集，那么您可以动态地组装数据和选项图表配置，并以编程方式将隐藏标志设置为true . 这是一个例子 .

// the dataset label we want to hide
var hiddenLabel = 'My Second Dataset';

// build our data and options config (if needed you could build the datasets dynamically from dynamic data (this example is static)
var config = {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First Dataset",
      backgroundColor: chartColors.red,
      borderColor: chartColors.red,
      data: [5, 10, 25, 15, 10, 20, 30],
      fill: false,
    }, {
      label: "My Second Dataset",
      fill: false,
      backgroundColor: chartColors.blue,
      borderColor: chartColors.blue,
      data: [5, 0, 12, 5, 25, 35, 15],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Hide Dataset Matching "My Seconds Dataset" After 3 Seconds'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Month'
        }
      }],
    }
  }
};

// iterate over our datasets to find the one we want to hide
config.data.datasets.forEach(function(e) {
  if (e.label === hiddenLabel) {
    e.hidden = true;
  }
});

// instantiate the chart
var myLine = new Chart($('#canvas'), config);

回复于 2024-05-19T00:29:18+08:00

Chart.js - 加载后使用标签字符串隐藏行

1 回答

相关问题