javascript - Highcharts 图表的默认值

Question

我们正在使用Highcharts用于仪表板 Web 应用程序中的图表。我们正在用 javaScript 创建图形对象。大多数图表都有相似的选项。例如。一张图是由这样的东西创建的:

Highcharts.chart('boiler-temp', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Boiler temperatures'
    },         
    legend: { 
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    yAxis: [{
        title: {
            text: 'Inner temperature'
        }
    }, {
        title: {
            text: 'Outer temperature',
        },
        opposite: true,
        min: 0,
        max: 100
    }],
    data: {
        rowsURL: dataUrl,
    },
    series: [{
        yAxis: 0,
    }, {
        yAxis: 1,
    }],
    plotOptions: {
        series: {
        connectNulls: true
        }
    },
    exporting: {
        fallbackToExportServer: false
    }
}

另一个图表的创建方式非常类似:

Highcharts.chart('boiler-temp', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Boiler pressure'
    },         
    legend: { 
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    yAxis: [{
        title: {
            text: 'Inner pressure'
        }
    }, {
        title: {
            text: 'Outer outer pressure',
        },
        opposite: true,
        min: 0,
        max: 100
    }],
    data: {
        rowsURL: dataUrl,
    },
    series: [{
        yAxis: 0,
    }, {
        yAxis: 1,
    }],
    plotOptions: {
        series: {
        connectNulls: true
        }
    },
    exporting: {
        fallbackToExportServer: false
    }
}

为了可维护性，我想定义一组默认选项为

{
    chart: {
        type: 'spline'
    },
    legend: { 
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    yAxis: [{
    }, {
        opposite: true,
        min: 0,
        max: 100
    }],
    series: [{
        yAxis: 0,
    }, {
        yAxis: 1,
    }],
    plotOptions: {
        series: {
        connectNulls: true
        }
    },
    exporting: {
        fallbackToExportServer: false
    }
}

然后，当我实例化图表时，覆盖更改的内容。有没有办法用 Highcharts/JavaScript 做到这一点？

Answer 1

可以使用 Highcharts 全局选项来完成 - 同一页面上所有图表的选项集。

Highcharts.setOptions({
  chart: {
    type: 'spline'
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom'
  },
  yAxis: [{}, {
    opposite: true,
    min: 0,
    max: 100
  }],
  series: [{
    yAxis: 0,
  }, {
    yAxis: 1,
  }],
  plotOptions: {
    series: {
      connectNulls: true
    }
  },
  exporting: {
    fallbackToExportServer: false
  }
});

演示:

• https://jsfiddle.net/BlackLabel/ugsfoyeh/

文档:

• https://www.highcharts.com/docs/getting-started/how-to-set-options#2

<小时/>

另一种方法是在应用程序中的某个位置创建 defaultOptions 并使用例如将它们与图表选项合并。 Highcharts.merge()。

const defualtData = {
  chart: {
    type: 'spline'
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom'
  },
  yAxis: [{}, {
    opposite: true,
    min: 0,
    max: 100
  }],
  series: [{
    yAxis: 0,
  }, {
    yAxis: 1,
  }],
  plotOptions: {
    series: {
      connectNulls: true
    }
  },
  exporting: {
    fallbackToExportServer: false
  }
};

Highcharts.chart('boiler-temp1', Highcharts.merge(defualtData, {
  title: {
    text: 'Boiler temperatures'
  }
}));

演示:

• https://jsfiddle.net/BlackLabel/5epm4hqc/

API引用:

• https://api.highcharts.com/class-reference/Highcharts#.merge