Highcharts not responsive for all series in chart

问题

I am creating a responsive chart that includes a text box to the right of the chart area. The text is updated when I hover over data on the chart.

The text box is responsive, and works fine on a smaller screen when hovering over the first data set. However, it does not work when hovering over the 2nd and 3rd data sets.

See fiddle: http://jsfiddle.net/b0u10ndw/

Here is the code for the responsive section:

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                },
                series: { point: {  events: { mouseOver: function ()    {
                                 var chart = this.series.chart;
                                if (!chart.lbl) {
                                chart.lbl = chart.renderer.label('')
                                .add();
                                }
                                chart.lbl
                                    .show()
                                    .css({ width: '80' })
                                    .attr({ text: 'this is the text and I have to make it really long so that it goes for multiple lines' });
                                        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {
                                                align: 'right',
                                                x: 0, // offset
                                                verticalAlign: 'top',
                                                y: 50 // offset
                                                }), null, 'spacingBox');
                                }

                    } } },

Make the chart small, then hover over each bar and you will see the issue.

I tried setting the width of the text box as a percentage, but it only seems to accept px units.

回答1:

The chart behaves correctly according to the documentation.

A special case is configuration objects that take arrays, for example xAxis, yAxis or series. For these collections, an id option is used to map the new option set to an existing object. If an existing object of the same id is not found, the first item is updated. So for example, setting chartOptions with a series item without an id, will cause the existing chart's first series to be updated.

see: responsive.rules

So the solution (Sergiu's solution also does the work) is defining events in plotOptions.column object.

 plotOptions: {
        column: {
          point: {
            events: {
              mouseOver: function() {
                ...
              }
            }
          }
        }
      },

example: http://jsfiddle.net/b0u10ndw/1/

I defined options in plotOptions.column instead of plotOptions.series (which makes more sense) but it appeared that that options causes error (bug reported here).

For Sergiu's allowPointSelect example - the requirement is linking the series by the ids:

In chart options:

series: [{
        name: 'Christmas Eve',
        data: [1, 4, 3],
        id: 's1'
    }, {
        name: 'Christmas Day before dinner',
        data: [6, 4, 2],
        id: 's2'
    }, {
        name: 'Christmas Day after dinner',
        data: [8, 4, 3],
        id: 's3'
    }],

In responsive rules:

 series:[{
                        allowPointSelect:true,
                      id: 's1'
                    }, {
                        allowPointSelect:true,
                      id: 's2'
                    }, {
                        allowPointSelect:true,
                      id: 's3'

example: http://jsfiddle.net/hsd19y0y/3/

回答2:

I don't think the series object override is supported. Using the responsive demo on highcharts, I was able to reproduce the same issues that you have using a simple property override for the series object: http://jsfiddle.net/hsd19y0y/

As you may notice, when you make the chart small, the allowPointSelect property is overridden only for the first column in each group.

The same is valid for you example. If you put different texts for the normal mouseOver even and for the one specified in the responsive object, you will notice that the event in the responsive declaration is only triggered for the first column in each group. See here: http://jsfiddle.net/kokup8sx/

In order to achieve what you need, you can change the main mouseOver event handler to do different things depending on this property:

chart.chartWidth

Something like:

mouseOver: function ()  {
    var chart = this.series.chart;
    if (!chart.lbl) {
        chart.lbl = chart.renderer.label('').add();
    }

    if(chart.chartWidth < 500){
        // handle for small screens
        chart.lbl.show().css({ width: '80' }).attr({ text: 's-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right',x: 0, verticalAlign: 'top',y: 50}), null, 'spacingBox');
    }
    }else{
        chart.lbl.show().css({ width: '180' }).attr({ text: 'l-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right',x: 0, verticalAlign: 'top',y: 50}), null, 'spacingBox');
    }
}

来源：https://stackoverflow.com/questions/41469050/highcharts-not-responsive-for-all-series-in-chart

标签

jquery

css

Highcharts

textbox

responsive