Question

我想在HighCharts向下钻取之间传递隐藏值。当用户点击某个项目（项目1）时，他们有3个选择。在单击任何这些选择时，我希望从项目1传递一个隐藏ID，以便使用此ID使用另一个PHP脚本执行操作。这可能吗？

$(function() {
    // Create the chart
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Overall Status'
        },
        xAxis: {
            type: 'category',
            labels: {
                style: {
                    fontSize: '15px'
                }
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: '20px'
                    }
                },
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            if (this.options && this.options.url) {
                                location.href = this.options.url;
                            }
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Status',
            colorByPoint: true,
            data: [{
                name: 'Item 1',
                y: 80,
                drilldown: 'item1'
            }, {
                name: 'Item 2',
                y: 33,
                drilldown: 'item2'
            }]
        }],
        drilldown: {
            series: [{
                id: 'item1',
                data: [{
                    name: 'Condition 1',
                    url: 'http://myurl?id=item 1',
                    y: 7
                }, {
                    name: 'Condition 2',
                    url: 'http://myurl?id=item 1',
                    y: 2,
                }, {
                    name: 'Condition 3',
                    url: 'http://myurl?id=item 1',
                    y: 1,
                }]
            }, {
                id: 'item2',
                data: [{
                    name: 'Condition 1',
                    url: 'http://myurl?id=item 2',
                    y: 3
                }, {
                    name: 'Condition 2',
                    url: 'http://myurl?id=item 2',
                    y: 2,
                }, {
                    name: 'Condition 3',
                    url: 'http://myurl?id=item 2',
                    y: 9,
                }]

            }]
        }
    });
});

在这里有一个jsfiddle https://jsfiddle.net/mark2017/bd1v6tew/2/

Answer 1

您可以在MWE上动态执行此操作。

为点定义隐藏属性。

series: [{
  name: 'Status',
  colorByPoint: true,
  data: [{
    name: 'Item 1',
    y: 80,
    drilldown: 'item1',
    hiddenValue: 'hidden 1',
  }, {
    name: 'Item 2',
    y: 33,
    drilldown: 'item2',
    hiddenValue: 'hidden 2'
  }]
}],

将父hiddent属性保存到明细事件的新系列中：

chart: {
  type: 'bar',
  events: {
    drilldown: function (e) {
      e.seriesOptions.hiddenValue = e.point.options.hiddenValue;
    }
  }
},

点击点击事件阅读：

click: function() {
  var seriesOptions = this.series && this.series.options;
  var hiddenValue = seriesOptions && seriesOptions.hiddenValue;

  console.log(hiddenValue);

示例：drilldown event

隐藏值是否可以在highcharts明细之间传递？

1 个答案: