Question

我正在制作一张图表，上面有两个x轴和两个y轴。这是一条曲线平滑的折线图。它应该有来自两个系列的行作为破折号或longdash但是当我使用dashStyle时它会抛出错误。我见过许多例子，它们在jsFidler或Plunker中工作。以下是我的代码。我正在使用Angular 4 with typescript。enter image description here

  var ctx = document.getElementById("PumpCurveEvolutionChart") as HTMLElement;

  var chart = Highcharts.chart(ctx, {
    chart:{
      height: 350,
      width: 700,
      marginTop: 30,

    },
    title: {  text: 'Flow (l/S)', verticalAlign: 'bottom'}
    ,
  xAxis: [{
      categories: this.getPumpCurveEvolution.OEMFlow,
  },
  {
    categories: this.getPumpCurveEvolution.CurrentFlow,
    opposite: true,
    labels: { enabled: false },
    minorTickLength: 0,
    tickLength: 0        
  }],
  yAxis:[{
    min: 0,
    max: 100,
    labels: { enabled: true},
    title: { text: 'Head (m)'},


  },{
    min: 0,
    max: 110,
    opposite: true,
    labels: { enabled: true},
    title: { text: 'Efficiency (%)'}
  }],
  plotOptions: {
    series: {marker: { enabled: false}, lineWidth: 2},

    //line: { dashStyle: 'dash'}
  },
  legend: {enabled: false,
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -30,
      y: 100,
      borderWidth: 0
  },      
  series: [{
    xAxis:0,
    yAxis:0,
    data: this.getPumpCurveEvolution.OEMHead,
  },
  {
    xAxis:0,
    yAxis:1,
    data: this.getPumpCurveEvolution.OEMHydrEfficiency,
  },
  {
    xAxis:1,
    yAxis:0,
    data: this.getPumpCurveEvolution.CurrentHead,
  },
  {
    xAxis:1,
    yAxis:1,
    data: this.getPumpCurveEvolution.CurrentHydrHead,
  }]
});

Answer 1

您可以通过扩展HighCharts.IndividualSeriesOptions使用dashStyle：

export interface IHighChartCustomSeries extends Highcharts.IndividualSeriesOptions {
    dashStyle?: string
}

dashStyle属性在角度4中不起作用

1 个答案: