Question

我正在使用注释插件在我的图表中绘制水平线。有没有办法隐藏和根据条件显示注释？

我的代码：

annotation: {

   drawTime: 'afterDatasetsDraw',
   annotations: [{
      id: 'hline1',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 50,
      borderColor: 'red',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
       backgroundColor: "red",
         content: "Benchmark",
         enabled: true,
          position : "left"
      }
   }, {
      id: 'hline2',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 30,
      borderColor: 'green',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
        backgroundColor: "green",
         content: "Target",
         enabled: true,
          position : "left"
      }
   }]

},

Answer 1

我不知道这是否是最好的答案，但由于Chartjs Annotation Plugin不允许显示或隐藏注释，您可以简单地将注释类型留空，这将隐藏注释。

然后根据您的情况，您可以再次添加类型。

annotation: {

   drawTime: 'afterDatasetsDraw',
   annotations: [{
      id: 'hline1',
      type: '',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 50,
      borderColor: 'red',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
       backgroundColor: "red",
         content: "Benchmark",
         enabled: true,
          position : "left"
      }
   }, {
      id: 'hline2',
      type: '',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 30,
      borderColor: 'green',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
        backgroundColor: "green",
         content: "Target",
         enabled: true,
          position : "left"
      }
   }]

},

Answer 2

    function UnDraw() {
        window.myLine.config.data.datasets.forEach(function (dataset) {
            window.myLine.options.annotation.annotations.pop();
        });
        window.myLine.update();
    };
    function Draw(a) {
        window.myLine.options.annotation.annotations.push(
            {
                type: 'box',
                drawTime: 'afterDraw',
                xScaleID: 'x-axis-0',
                yScaleID: 'y-axis-0',
                xMax: a * 1000,
                xMin: a * 1000,
                yMax: MAXY,
                yMin: MINY,
                borderColor: 'rgba(255,102,0,1)',
                borderWidth: 1,
                backgroundColor: 'rgba(255,102,0,1)',
            });
        window.myLine.update();
    };

ChartJS注释隐藏/显示

2 个答案: