Question

我一直在研究以下示例：http://jsfiddle.net/d69otfmb/1/

function showSeries(e) {
    this.graph.attr("stroke", (e.checked ? this.color : '#ccc'));
    this.graph.attr("stroke-width", (e.checked ? 4 : 2));
    if(e.checked ==  true){
        this.group.toFront();
        this.options.enableMouseTracking=true;
    } else {
        this.options.enableMouseTracking=false;
    }
}
function highlightSer(chart){
    var series = chart.series, i;
    for(i=0; i<series.length; i++) {
        series[i].options.enableMouseTracking=false;
        if( series[i].selected==true) {
             series[i].options.enableMouseTracking=true;
             showSeries.call(series[i], {checked: true});
        } 
    }
}

var optionsChart1 = {
    chart: {
        renderTo:'container'
    },
.
.
.
    plotOptions: {
        series: {
            showCheckbox:true,
            events: {
                checkboxClick:showSeries
            }
        }
    },
.
.
.
}

chart = new Highcharts.Chart(optionsChart1,highlightSer);

我已经设置了这个，所以我可以使用复选框来突出显示一个系列，并且也只有突出显示的系列显示在工具提示中（通过options.enableMouseTracking）。

它非常整洁，但在导出或下载时，对图表所做的任何调整都不会进入导出服务器。

在检查了很多例子并阅读API十几次之后，我仍然无法使其工作。有什么想法吗？

Answer 1

您正在更改系列的图形属性，而不使用Highcharts API。您需要在导出回调中使用相同的彩色线条。无论如何，您可以使用系列更新来正确更新将按您希望导出的系列。

除了更新颜色外，您还应该更新所选的选项。

function showSeries(e) {
  e.preventDefault && e.preventDefault()

  if (e.checked == true) {
    this.group.toFront();
  }

  this.update({
    selected: e.checked,
    lineColor: e.checked ? this.color : '#ccc',
    lineWidth: e.checked ? 4 : 2,
    enableMouseTracking: e.checked
  }, true, false)
}

function highlightSer(chart) {
  var series = chart.series,
    i;
  for (i = 0; i < series.length; i++) {
    if (series[i].selected == true) {
      showSeries.call(series[i], {
        checked: true
      });
    }
  }
}

示例：http://jsfiddle.net/0uxehybb/

Highcharts。系列突出显示未出现在下载中

1 个答案: