突出显示c3js图表的数据标签onmouseover

时间：2018-02-23 01:53:35

标签： d3.js c3.js

我正在尝试使用c3js的onMouseover api来包含数据标签突出显示而不是工具提示（这只是突出显示该x轴的数据标签，而不像在工具提示中显示它）。

但是当我尝试查看数据时，它（功能）并没有给我任何东西。我相信有不同的方法可以做到这一点。

我的小提琴：https://jsfiddle.net/sourabhtewari/8uz8j01j/198/

我的代码：

var stuff = [{
    "year": 2015,
    "month": 12,
    "s1": 0.38,
    "s2": 100,
    "s3": 22.2,
    "s4": 61,
    "s5": -7,
  },
  {
    "year": 2016,
    "month": 1,
    "s1": 0.39,
    "s2": 101,
    "s3": 22.12,
    "s4": 62,
    "s5": -6.0,
  },
  {
    "year": 2016,
    "month": 2,
    "s1": 0.43,
    "s2": 102,
    "s3": 22.11,
    "s4": 65,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 3,
    "s1": 0.40,
    "s2": 103,
    "s3": 22.07,
    "s4": 63,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 4,
    "s1": 0.39,
    "s2": 104,
    "s3": 22.04,
    "s4": 61,
    "s5": -7.0,
  },
  {
    "year": 2016,
    "month": 5,
    "s1": 0.38,
    "s2": 105,
    "s3": 22.2,
    "s4": 56,
    "s5": -11.3,
  },
  {
    "year": 2016,
    "month": 6,
    "s1": 0.38,
    "s2": 106,
    "s3": 22.05,
    "s4": 56,
    "s5": -12.8,
  },
  {
    "year": 2016,
    "month": 7,
    "s1": 0.37,
    "s2": 102,
    "s3": 22.7,
    "s4": 58,
    "s5": -9.7,
  },
  {
    "year": 2016,
    "month": 8,
    "s1": 0.37,
    "s2": 105,
    "s3": 21.20,
    "s4": 53,
    "s5": -6.2,
  },
  {
    "year": 2016,
    "month": 9,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.52,
    "s4": 64,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 10,
    "s1": 0.37,
    "s2": 103,
    "s3": 20.92,
    "s4": 62,
    "s5": -3.3,
  },
  {
    "year": 2016,
    "month": 11,
    "s1": 0.36,
    "s2": 107,
    "s3": 21.11,
    "s4": 51,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 12,
    "s1": 0.37,
    "s2": 114,
    "s3": 22.08,
    "s4": 56,
    "s5": -8.3,
  },
  {
    "year": 2017,
    "month": 1,
    "s1": 0.35,
    "s2": 103,
    "s3": 22.07,
    "s4": 56,
    "s5": -7.2,
  },
  {
    "year": 2017,
    "month": 2,
    "s1": 0.36,
    "s2": 108,
    "s3": 22.2,
    "s4": 63,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 3,
    "s1": 0.37,
    "s2": 96,
    "s3": 25.67,
    "s4": 62,
    "s5": -9.4,
  },
  {
    "year": 2017,
    "month": 4,
    "s1": 0.38,
    "s2": 102,
    "s3": 21.94,
    "s4": 63,
    "s5": -9.5,
  },
  {
    "year": 2017,
    "month": 5,
    "s1": 0.35,
    "s2": 114,
    "s3": 22.07,
    "s4": 61,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 6,
    "s1": 0.36,
    "s2": 103,
    "s3": 21.51,
    "s4": 54,
    "s5": -9.7,
  },
  {
    "year": 2017,
    "month": 7,
    "s1": 0.36,
    "s2": 107,
    "s3": 22.2,
    "s4": 65,
    "s5": -11.3,
  },
  {
    "year": 2017,
    "month": 8,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.2,
    "s4": 61,
    "s5": -12.8,
  },
  {
    "year": 2017,
    "month": 9,
    "s1": 0.36,
    "s2": 103,
    "s3": 22.15,
    "s4": 50,
    "s5": -8,
  },
  {
    "year": 2017,
    "month": 10,
    "s1": 0.37,
    "s2": 112,
    "s3": 22.07,
    "s4": 65,
    "s5": -9,
  },
];

var xAxisDates = [];

xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
  xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}

var factor = {
  s1: 10,
  s2: 0.08,
  s3: 0.52,
  s4: 0.18,
  s5: 20
};

var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
  vals1.push(stuff[i]["s1"] * factor.s1)
};

var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
  vals2.push(stuff[i]["s2"] * factor.s2)
};

var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
  vals3.push(stuff[i]["s3"] * factor.s3)
};

var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
  vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
  vals5.push((stuff[i]["s5"] + factor.s5))
};

var chart = c3.generate({
  size: {
    width: 2000,
    height: 600
  },
  onmouseover: onMouseover,

  data: {
    type: 'spline',
    groups: [
      ['data1', 'data2', 'data3', 'data4', 'data5']
    ],
    order: null,
    x: 'x',
    columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
    labels: {
      format: {
        data1: function(value, id, i, j) {
          return value / factor.s1 + "%"
        },
        data2: function(value, id, i, j) {
          return Math.round(value / factor.s2);
        },
        data3: function(value, id, i, j) {
          return value / factor.s3 + "%"
        },
        data4: function(value, id, i, j) {
          return Math.round(value / factor.s4) + "%"
        },
        data5: function(value, id, i, j) {
          return (value - factor.s5).toFixed(1);
        }
      }
    },
    colors: {
      data1: '#ff6666',
      data2: '#737575',
      data3: '#27A5CF',
      data4: '#C9BC22',
      data5: '#4D4B39'
    }
  },

  tooltip: {
    format: {
      value: function(value, ratio, id) {
        if (id == 'data1') {
          return value / factor.s1 + "%";
        }
        if (id == 'data2') {
          return (value / factor.s2).toFixed(2);
        }
        if (id == 'data3') {
          return value / factor.s3 + "%";
        }
        if (id == 'data4') {
          return Math.round(value / factor.s4) + "%"
        }
        if (id == 'data5') {
          return (value - factor.s5).toFixed(1);
        }

      }
    },
  },
  axis: {
    y: {
      min: 0,
      max: 60,
      padding: {
        top: 0,
        bottom: 0
      }
    },
    x: {
      type: 'timeseries',
      padding: {
        top: 0,
        bottom: 0,
        left:0
      },
      tick: {
        values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
        format: "%b-%y",

      }
    }
  },
  padding: {
    right: 30
  },
  point: {
    show: false
  }
});

function onMouseover(elemData) {
    console.log(elemData);
}

1 个答案:

答案 0 :(得分：0)

将onmouseover / onmouseout处理程序附加到数据而不是常规图表：

data: {
      onmouseover: onMouseover,
      onmouseout: onMouseout,

  ...
}

并将样式应用于数据文本标签：

function onMouseover(elemData) {
    var id = elemData.name;
    if (id==undefined) id = elemData.id;
    var el = d3 .select('.c3-chart-texts')
     .selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
     el.style("stroke", "red");
}

function onMouseout(elemData) {
    var id = elemData.name;
    if (id==undefined) id = elemData.id;
    var el = d3 .select('.c3-chart-texts')
     .selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
     el.style("stroke", "none");
}

检查小提琴已更新：https://jsfiddle.net/beaver71/2pxjdcm2/ 

var stuff = [{
    "year": 2015,
    "month": 12,
    "s1": 0.38,
    "s2": 100,
    "s3": 22.2,
    "s4": 61,
    "s5": -7,
  },
  {
    "year": 2016,
    "month": 1,
    "s1": 0.39,
    "s2": 101,
    "s3": 22.12,
    "s4": 62,
    "s5": -6.0,
  },
  {
    "year": 2016,
    "month": 2,
    "s1": 0.43,
    "s2": 102,
    "s3": 22.11,
    "s4": 65,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 3,
    "s1": 0.40,
    "s2": 103,
    "s3": 22.07,
    "s4": 63,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 4,
    "s1": 0.39,
    "s2": 104,
    "s3": 22.04,
    "s4": 61,
    "s5": -7.0,
  },
  {
    "year": 2016,
    "month": 5,
    "s1": 0.38,
    "s2": 105,
    "s3": 22.2,
    "s4": 56,
    "s5": -11.3,
  },
  {
    "year": 2016,
    "month": 6,
    "s1": 0.38,
    "s2": 106,
    "s3": 22.05,
    "s4": 56,
    "s5": -12.8,
  },
  {
    "year": 2016,
    "month": 7,
    "s1": 0.37,
    "s2": 102,
    "s3": 22.7,
    "s4": 58,
    "s5": -9.7,
  },
  {
    "year": 2016,
    "month": 8,
    "s1": 0.37,
    "s2": 105,
    "s3": 21.20,
    "s4": 53,
    "s5": -6.2,
  },
  {
    "year": 2016,
    "month": 9,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.52,
    "s4": 64,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 10,
    "s1": 0.37,
    "s2": 103,
    "s3": 20.92,
    "s4": 62,
    "s5": -3.3,
  },
  {
    "year": 2016,
    "month": 11,
    "s1": 0.36,
    "s2": 107,
    "s3": 21.11,
    "s4": 51,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 12,
    "s1": 0.37,
    "s2": 114,
    "s3": 22.08,
    "s4": 56,
    "s5": -8.3,
  },
  {
    "year": 2017,
    "month": 1,
    "s1": 0.35,
    "s2": 103,
    "s3": 22.07,
    "s4": 56,
    "s5": -7.2,
  },
  {
    "year": 2017,
    "month": 2,
    "s1": 0.36,
    "s2": 108,
    "s3": 22.2,
    "s4": 63,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 3,
    "s1": 0.37,
    "s2": 96,
    "s3": 25.67,
    "s4": 62,
    "s5": -9.4,
  },
  {
    "year": 2017,
    "month": 4,
    "s1": 0.38,
    "s2": 102,
    "s3": 21.94,
    "s4": 63,
    "s5": -9.5,
  },
  {
    "year": 2017,
    "month": 5,
    "s1": 0.35,
    "s2": 114,
    "s3": 22.07,
    "s4": 61,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 6,
    "s1": 0.36,
    "s2": 103,
    "s3": 21.51,
    "s4": 54,
    "s5": -9.7,
  },
  {
    "year": 2017,
    "month": 7,
    "s1": 0.36,
    "s2": 107,
    "s3": 22.2,
    "s4": 65,
    "s5": -11.3,
  },
  {
    "year": 2017,
    "month": 8,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.2,
    "s4": 61,
    "s5": -12.8,
  },
  {
    "year": 2017,
    "month": 9,
    "s1": 0.36,
    "s2": 103,
    "s3": 22.15,
    "s4": 50,
    "s5": -8,
  },
  {
    "year": 2017,
    "month": 10,
    "s1": 0.37,
    "s2": 112,
    "s3": 22.07,
    "s4": 65,
    "s5": -9,
  },
];

var xAxisDates = [];

xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
  xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}

var factor = {
  s1: 10,
  s2: 0.08,
  s3: 0.52,
  s4: 0.18,
  s5: 20
};

var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
  vals1.push(stuff[i]["s1"] * factor.s1)
};

var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
  vals2.push(stuff[i]["s2"] * factor.s2)
};

var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
  vals3.push(stuff[i]["s3"] * factor.s3)
};

var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
  vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
  vals5.push((stuff[i]["s5"] + factor.s5))
};

var chart = c3.generate({
  size: {
    width: 2000,
    height: 600
  },
  //onmouseover: onMouseover,

  data: {
	  onmouseover: onMouseover,
    onmouseout: onMouseout,

    type: 'spline',
    groups: [
      ['data1', 'data2', 'data3', 'data4', 'data5']
    ],
    order: null,
    x: 'x',
    columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
    labels: {
      format: {
        data1: function(value, id, i, j) {
          return value / factor.s1 + "%"
        },
        data2: function(value, id, i, j) {
          return Math.round(value / factor.s2);
        },
        data3: function(value, id, i, j) {
          return value / factor.s3 + "%"
        },
        data4: function(value, id, i, j) {
          return Math.round(value / factor.s4) + "%"
        },
        data5: function(value, id, i, j) {
          return (value - factor.s5).toFixed(1);
        }
      }
    },
    colors: {
      data1: '#ff6666',
      data2: '#737575',
      data3: '#27A5CF',
      data4: '#C9BC22',
      data5: '#4D4B39'
    }
  },

  tooltip: {
    format: {
      value: function(value, ratio, id) {
        if (id == 'data1') {
          return value / factor.s1 + "%";
        }
        if (id == 'data2') {
          return (value / factor.s2).toFixed(2);
        }
        if (id == 'data3') {
          return value / factor.s3 + "%";
        }
        if (id == 'data4') {
          return Math.round(value / factor.s4) + "%"
        }
        if (id == 'data5') {
          return (value - factor.s5).toFixed(1);
        }

      }
    },
  },
  axis: {
    y: {
      min: 0,
      max: 60,
      padding: {
        top: 0,
        bottom: 0
      }
    },
    x: {
      type: 'timeseries',
      padding: {
        top: 0,
        bottom: 0,
        left:0
      },
      tick: {
        values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
        format: "%b-%y",

      }
    }
  },
  padding: {
    right: 30
  },
  point: {
    show: false
  }
});

function onMouseover(elemData) {
		console.log(elemData.name, elemData.index);
    var id = elemData.name;
    if (id==undefined) id = elemData.id;
    var el = d3 .select('.c3-chart-texts')
     .selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
     el.style("stroke", "red");
}

function onMouseout(elemData) {
    var id = elemData.name;
    if (id==undefined) id = elemData.id;
    var el = d3 .select('.c3-chart-texts')
     .selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
     el.style("stroke", "none");
     //rgb(255, 102, 102)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<div id="chart"></div>

相关问题
最新问题