鼠标悬停时如何在图表上删除线?

时间:2018-11-18 08:16:27

标签: javascript reactjs chart.js

此图表在鼠标悬停时有线,在删除线时有i,因为单击点数据时显示x轴相同的数据,例如:如果在x轴上选择日期,则每个色差数据都有颜色,但是当有单击所有相同的数据时便会显示效果

看我的代码。如果他了解某人,请帮助我

Picture chart

看图片看图表只按链接图

enter code here
//define graph line colors
import * as Style from 'styles/config';


export function getCustomTimeChart(chartData){

  var legendLabels = [];
  var lineColors = Style.lineColors;
  //var entryData={};
  chartData.data.forEach(function(entry){
    entry.type = 'line';
    legendLabels.push(entry.name);
    //entryData=entry;
  });

  var title = '';

  if (chartData.title){
    //title = entryData.data;
   title = chartData.title;

  }

  if (chartData.dataColors) lineColors = chartData.dataColors;

  var option = {
      title: {
        show:false,
          text: title
      },
      textStyle:{
         color:Style.chartColor
      },
      color:lineColors,
      tooltip: {
          trigger: 'axis',
          formatter: function (params) {
              params = params[0];
              return params.value[0] + ' : ' + params.value[1];
          },
          axisPointer: {
              animation: false
          }
      },
      legend: {
          data:legendLabels,
          textStyle:{
             color:Style.chartColor
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {
                title:'Image'



                ,
                backgroundColor: Style.chartBackground
              }
          },
          iconStyle:{
            normal:{
              borderColor:Style.chartColor
            },
            emphasis:{
              borderColor:Style.chartColor
            }
          }
      },
      labels: chartData.labels,

      xAxis: {
          axisLine:{
                 lineStyle:{
                 color:Style.chartColor

                             }
          },
          type: 'time',
          splitLine: {
            show: false
          },
          distribution: 'series'
      },
      yAxis: {
          axisLine:{
             lineStyle:{
                 color:Style.chartColor
             }
          },
          type: 'value',
        boundaryGap: [0, '100%'],
          splitLine: {
              show: false
          }
      },
      series: chartData.data
  };

  return option;

}

chart

0 个答案:

没有答案