高图中的跳线图

Question

我使用高图表https://www.highcharts.com/来制作一个跳跃线和柱状图的组合图。高图表没有这种类型的跳转线图表。谁能找到更好的解决方案？如何使用高图表将跳线图与列图集成？

这就是我要做的..。

组合图

这是我正在使用的代码

​

Highcharts.chart("container", {
  title: {
    text: "Combination chart"
  },


  plotOptions: {
    column: {
      borderRadius: 5
    },
    series: {
            marker: {
                enabled: false
            }
        }
  },
  xAxis: {
    categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"]
  },
  labels: {
    items: [
      {
        // html: 'Total fruit consumption',
        style: {
          left: "50px",
          top: "18px",
          color:
            // theme
            (Highcharts.defaultOptions.title.style &&
              Highcharts.defaultOptions.title.style.color) ||
            "black"
        }
      }
    ]
  },
  series: [
    {
      // max:0,
      pointWidth: 7,
      type: "column",
      name: "TP",
      lineWidth: 8,
      data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55]
    },
    {
      type: "column",
      name: "1S",
      pointWidth: 7,
      data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100],
      // yAxis: 1
    },
    {
      type: "column",
      name: "1A",
      pointWidth: 7,
      data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100],
      // yAxis: 1
    },

    {
      type: "line",
      name: "LYTP",
      data: [10,10,null,80,80,null,90,90,null,103,103],
      // dashStyle: "longdash",
      marker: {
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[1],
        fillColor: "lightblue"
      }
    },
    {
      // type: 'pie',
      // name: 'Total consumption',

      center: [100, 80],
      size: 100,
      showInLegend: false,
      dataLabels: {
        enabled: false
      }
    }
  ]
});

.highcharts-strong {
  font-weight: bold;
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 320px; 
  max-width: 600px;
  margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Timeline charts are used to place events on a time axis,
    such as this example showing the major space exploration
    events from 1951 to 1975.
  </p>
</figure>

​

Answer 1

在这种情况下，高级图表中没有完全满足您要求的系列，但是您可以很容易地创建这样的系列。只需稍微修改列系列就足够了：

(function(H) {
    H.seriesType('jump-line', 'column', {
        height: 6
    }, {
        translate: function() {
            H.seriesTypes.column.prototype.translate.apply(this);

            this.points.forEach(function(point) {
                point.shapeArgs.height = this.options.height;
            }, this);
        }
    });
}(Highcharts));

Highcharts.chart('container', {
    ...,
    series: [..., {
        type: 'jump-line',
        pointPadding: 0,
        grouping: false,
        data: [4, 4, 4]
    }]
});

现场演示： http://jsfiddle.net/BlackLabel/x3rtdzc0/

API参考：

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

https://www.highcharts.com/docs/extending-highcharts/extending-highcharts