Highcharts无法响应图表中的所有系列 [英] Highcharts not responsive for all series in chart

问题描述

我正在创建一个包含图表区右侧的文本框的响应式图表。当我将鼠标悬停在图表上的数据上时，文本会更新。

文本框具有响应性，并且在悬停在第一个数据集上时可以在较小的屏幕上正常工作。但是，在悬停在第二和第三个数据集上时，它不起作用。

参见小提琴： http://jsfiddle.net/b0u10ndw/

以下是响应部分的代码：

 响应：{
规则：[{
条件：{
 maxWidth：500 
}，， 
 chartOptions：{
 legend：{
 align：'center'，
 verticalAlign：'bottom'，
 layout：'horizo​​ntal'
}，
 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并且我必须使它真的很长，以便用于多行'}）; 
 chart.lbl.align（Highcharts.extend（chart.lbl.getBBox（），{
 align：'right'，
x：0，// offset 
 verticalAlign：'顶部'，$ b $由：50 //偏移
}），null，'spacingBox'）; 
} 
 
}}}，
  

，然后将鼠标悬停在每个栏上，您将看到该问题。

我尝试以百分比形式设置文本框的宽度，但似乎只接受px单位。

解决方案

根据文档，图表的行为是正确的。

特殊情况是使用数组的配置对象，例如xAxis，yAxis或系列。对于这些集合，使用id选项将新选项集映射到现有对象。如果找不到相同ID的现有对象，则更新第一个项目。因此，例如，设置chartOptions与一个没有id的系列项目，将导致现有图表的第一个系列被更新。

请参阅： responsive.rules

所以解决方案（Sergiu的解决方案也是这样做的）在 plotOptions.column 对象中定义事件。

  plotOptions：{
 column：{
 point：{
 events：{
 mouseOver：function（）{
 ... 
 
 
 
 
 $ b code 
 
 
 
例如： http://jsfiddle.net/b0u10ndw/1/  
 
 
 
我在 plotOptions.column 中定义了选项，而不是 plotOptions.series （这更有意义），但它出现了该选项会导致错误（错误报告此处）。
 
 
 
对于Sergiu的allowPointSelect示例 - 要求是通过id链接系列：
 
 
 
在图表选项中：
 系列：[{
名称：'圣诞节前夕'，
数据：[1，4，3]，
 id ：'s1'
}，{
名称：'晚餐前的圣诞节'，
数据：[6,4,2]，
 id：'s2'
 $ {b $ b name：'圣诞节晚餐后'，
 data：[8,4,3]，
 id：'s3'
}]，
  
在响应式规则中： 
 
 
 系列：[{
 allowPointSelect：true，
 id：'s1'
}，{
 allowPointSelect：true，
 id：'s2'
 }，{
 allowPointSelect：true，
 id：'s3'
  
示例： http://jsfiddle.net/hsd19y0y/3/  
 
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.
解决方案
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/

                        
这篇关于Highcharts无法响应图表中的所有系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！