Scatter HighChart与多项式图的组合

时间:2018-04-12 16:36:19

标签: javascript highcharts regression spline scatter

我正在尝试一个图表,它在一个单图表(样条和多项式)中组合了两种图表类型。当我合并它们时,图表停止工作。如果我他们分开工作。我可以使用高图合并两个图表吗?



$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    title: {
      text: 'Polynomial regression - with extrapolation and different style'
    },
    subtitle: {
      text: 'Source: Heinz  2003'
    },
    xAxis: {
      title: {
        enabled: true,
        text: 'Height (cm)'
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        text: 'Weight (kg)'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      x: 100,
      y: 70,
      floating: true,
      backgroundColor: '#FFFFFF',
      borderWidth: 1
    },
    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: 'rgb(100,100,100)'
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} cm, {point.y} kg'
        }
      }
    },
    series: [{
        name: 'SplineChart',
        type: 'spline',
        marker: {
          enabled: true
        },
        tooltip: {
          pointFormatter: pointFormatter
        },
        data: [
          [1, 2],
          [1, 6],
          [3, 9],
        ]
      },
      {
        regression: true,
        regressionSettings: {
          type: 'polynomial',
          color: 'rgba(223, 183, 83, .9)',
          dashStyle: 'dash'
        },
        name: 'Test input',
        color: 'rgba(223, 83, 83, .5)',
        data: [
          [1, 1],
          [2, 3],
          [3, 9],

        ]

      }
    ]
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8">
</script>
Highcharts Regression
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

据报道bug。无论如何,当spline使用透明颜色时,它可以工作:

series: [{
    regression: true,
    regressionSettings: {
      type: 'polynomial',
      color: 'rgba(223, 183, 83, 0)', // transparent color
      dashStyle: 'dash'
    },
    name: 'SplineChart',
    type: 'spline',
    marker: {
      enabled: true
    },
    data: [
      [1, 2],
      [1, 6],
      [3, 9],
    ]
  }

Updated Fiddle