Question

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

文本框具有响应性，当鼠标悬停在第一个数据集上时，可在较小的屏幕上正常工作。但是，当将鼠标悬停在第2和第3个数据集上时，它不起作用。

以下是响应部分的代码：

nil

将图表缩小，然后将鼠标悬停在每个条形图上，您将看到问题。

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

Answer 1

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

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

请参阅：responsive.rules

所以解决方案（Sergiu的解决方案也能完成工作）是在plotOptions.column对象中定义事件。

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

示例：http://jsfiddle.net/b0u10ndw/1/

我在plotOptions.column而不是plotOptions.series中定义了选项（这更有意义），但似乎这些选项会导致错误（错误报告here）。

对于Sergiu的allowPointSelect示例 - 要求是通过ID链接系列：

在图表选项中：

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'
    }],

在响应式规则中：

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

示例：http://jsfiddle.net/hsd19y0y/3/

Answer 2

我认为不支持系列对象覆盖。使用highcharts上的响应演示，我能够使用系列对象的简单属性覆盖重现您所遇到的相同问题： http://jsfiddle.net/hsd19y0y/

正如您所注意到的，当您将图表缩小时，仅覆盖每个组中第一列的allowPointSelect属性。

同样适用于你的例子。如果为普通mouseOver和响应对象中指定的文本添加不同的文本，您会注意到响应声明中的事件仅针对每个组中的第一列触发。见这里：http://jsfiddle.net/kokup8sx/

为了达到您的需要，您可以根据此属性更改主mouseOver事件处理程序以执行不同的操作：

chart.chartWidth

类似的东西：

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');
    }
}

Highcharts对图表中的所有系列都没有响应

2 个答案: