Question

旋转后我遇到线性chart.js的问题。此图表嵌套在div中，此div具有css规则“transform：rotate（-90deg）”。问题如下：当div没有旋转并且我点击图表时，我可以看到工具提示正好出现在点击的点上。但是当旋转父div时，工具提示不会出现在我点击的确切位置。我的前提是，在我开发的代码中已经修改了'轴'从“x”到“y”的适当性：

...options.tooltips.axis = "y";

这是一张图片：

以下是我的选项代码：

"optionsGaugeLinear": {
  elements: { point:
    {
      radius: 0
    }
  },
  hover:{
    intersect: false
  },
  scales: {
    xAxes: [{
      ticks: {
        callback: function(value, index, values) {
          return value.substr(11,15);
        }
      }
    }],
    yAxes: [
      {
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left',
        ticks: {
          fontColor: "#5473aa", // this here
        }
      },
      {
        id: 'y-axis-2',
        type: 'linear',
        display: true,
        position: 'right',
        ticks: {
          fontColor: "#fe7014", // this here
        }
      }
    ]
  },
 connectNullData: false,
 linearGraphic: true,
 events: ["click"],
 tooltips: {
   intersect: false,
   callbacks: {
     label: function(tooltipItem, data) {
       var nuova_data = data.labels[tooltipItem.index];
       if ((tooltipItem.datasetIndex == 0 || tooltipItem.datasetIndex == 2)) {
        if (Number(parseFloat(tooltipItem.yLabel).toFixed(2)) < 1000) {
          return nuova_data + ' ' + Number(parseFloat(tooltipItem.yLabel).toFixed(2)) + " MWh";
        } else {
          return nuova_data + ' ' + Number(parseFloat(tooltipItem.yLabel/1000).toFixed(2)) + " GWh";
        }
       } else {
        nuova_data =  moment(nuova_data, 'DD/MM/YYYY HH:mm').add(1, 'days').format('DD/MM/YYYY HH:mm');
          if (Number(parseFloat(tooltipItem.yLabel).toFixed(2)) < 1000) {

            return nuova_data + ' ' + Number(parseFloat(tooltipItem.yLabel).toFixed(2)) + " MW";
          } else {

            return nuova_data  + ' ' +Number(parseFloat(tooltipItem.yLabel/1000).toFixed(2)) + " GW";
          }
       }

     },
     title: function(tooltipItem, data) {
       return ''
     },
     beforeLabel : function(tooltipItem, data){
        if(data.datasets[tooltipItem.datasetIndex].label == "EnergyBefore"){
          return 'Energy'
        }else if(data.datasets[tooltipItem.datasetIndex].label == "PowerBefore"){
          return 'Power'
        }
     }
   }
 }
}

以下是更改参考轴的代码：

function(chart, e) {
        for (var i=0; i<vm.charts.length; i++) {
          // Selezioniamo il chart con il grafico lineare
          if (("linearGraphic" in vm.charts[i].config.options) && (vm.charts[i].ctx != null) ) {
            var x = e.clientX;
            var y = e.clientY;
            vm.Xpointer = x;
            vm.Ypointer = y;
            vm.charts[i].options.tooltips.enabled = true;
            if(vm.rotateGraphic){
              vm.charts[i].options.tooltips.axis = "y";
              vm.charts[i].options.hover.axis = "y";
            }else{
              vm.charts[i].options.tooltips.axis = "x";
              vm.charts[i].options.hover.axis = "x";
            }
            console.log(vm.charts[i].id + ": " + vm.charts[i].options.tooltips.enabled);
          }
        }
      }
    }

我想指定线性图表画布周围的容器div具有以下css规则：

.containerGraphicsExtended{
  width: calc(100vh);
  height: calc(100vh);
  margin: auto;
  background: #f1f2f2;
  position: fixed;
  display: flex;
  flex-direction: column;
  left: 50%;
  top: 0;
  bottom: 0rem;
  justify-content: center;
  align-items: center;
  transform: rotate(-90deg) translateY(-50%);
  z-index: 11;
}

我点击了图片中的红点，但工具提示和图形的条带上的点出现在相对于点击的错误位置。我也试过旋转而不是父div，整个画布通过'旋转'适当但结果是相同的...... 你知道这种行为的原因吗？

谢谢。

Chart.js旋转了线性图表

0 个答案: