Как использовать высокие графики в Angular? - PullRequest
Новая
       15

Как использовать высокие графики в Angular?

0 голосов
/ 28 ноября 2018

enter image description here

Я использую столбчатую диаграмму столбца High-Stacked.Я могу получить Бар с небесно-голубым и белым цветами, но мне нужен бар с точками в 24, 41 и 49 точках y_axis, как показано на картинке.Пожалуйста, помогите мне в достижении этого.Заранее спасибо.Код, который я пробовал до сих пор. 

export class AppComponent {
  title = 'Smaple';
  options = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked'
    },
    xAxis: {
        categories: ['data1', 'data2', 'data3', 'data4']
    },
    yAxis: {
        min: 0,
        tickInterval: 50,
        max: 100

    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
        },
        series: {
            borderColor: '#000'
        }
    },
    series: [{
        name: 'Total',
        data: [{ y: 20, color: "white"}]
    }, {
        name: 'Actual',
        data: [{ y: 80, color: "skyblue"}],
    }]
};

1 Ответ

0 голосов
/ 29 ноября 2018

Вы можете использовать Highcharts.SVGRenderer и отображать дополнительные элементы в каждом столбце.Сначала используйте renderer.rect , чтобы создать три прямоугольника, затем renderer.path , чтобы создать линию между ними.Обратите внимание, что каждый раз при визуализации диаграммы вы должны уничтожать старые элементы и отображать новые.Проверьте демо, которое я разместил ниже.

HTML: 

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS: 

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      render: function() {
        var chart = this,
          series = chart.series[1],
          points = series.points,
          yAxis = chart.yAxis[0],
          customPoints = [
            24,
            41,
            49
          ],
          path = [],
          height = 7,
          element,
          width,
          x,
          y,
          i;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        points.forEach(function(point) {
          if (point.series.visible) {
            x = point.plotX + chart.plotLeft;
            width = point.pointWidth * 0.2;

            for (i = 0; i < customPoints.length; i++) {
              y = yAxis.toPixels(customPoints[i]);

              if (i === 0) {
                path.push('M');
              } else {
                path.push('L');
              }

              path.push(x);
              path.push(y);

              element = chart.renderer.rect(x - (width / 2), y, width, height)
                .attr({
                  strokeWidth: 1,
                  fill: '#000'
                })
                .add()
                .toFront();

              chart.customElements.push(element);
            }

            element = chart.renderer.path(path)
              .attr({
                'stroke-width': 1,
                stroke: '#000',
                fill: '#000'
              })
              .add()
              .toFront();

            chart.customElements.push(element);
          }
        });
      }
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      borderColor: '#000'
    }
  },
  series: [{
    name: 'Total',
    data: [{
      y: 20,
      color: "white"
    }]
  }, {
    name: 'Actual',
    data: [{
      y: 80,
      color: "skyblue"
    }]
  }]
});

Демо: https://jsfiddle.net/BlackLabel/hn96dfwm/

...