如何在Angular中使用高榜？

Question

我正在使用 High chart-stacked column bar chart。我可以获得带有天蓝色和白色的条形图，但我需要一个带有 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"}],
    }]
};

Answer 1

您可以使用 Highcharts.SVGRenderer and render additional elements on each column. Firstly use renderer.rect to create three rectangles, then 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/

Answer 2

这对我有用：

安装库

npm install --save highcharts

在您希望呈现图表的组件中：

    import * as Highcharts from 'highcharts';

    // Imports all modules you need and then inicialized
    declare var require: any;
    let Boost = require('highcharts/modules/boost');
    let Pareto = require('highcharts/modules/pareto');
    let noData = require('highcharts/modules/no-data-to-display');
    let More = require('highcharts/highcharts-more');
    
    Boost(Highcharts);
    noData(Highcharts);
    Pareto(Highcharts);
    More(Highcharts);
    noData(Highcharts);


   export class YourNameComponent implements OnInit {

    options: any = {
    title: {
      text: null // Your title
    },
    chart: {
      type: 'spline'  // type chart
    },
    tooltip: {
      crosshairs: true,
      shared: true
    },
    yAxis: {
      title: {
        text: 'Ventas'
      }
    },
    xAxis: {
      title: {
        text: 'Mobiliario'
      },
      categories: [] // Your categories
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    plotOptions: {
      spline: {
        marker: {
          radius: 4,
          lineColor: '#666666',
          lineWidth: 1
        }
      }
    },
    series: [] // Your data series
  };

    ngOnInit(): void {
     this.initChart();
    }


    initChart(): void {
       const idElementHtml = 'your id chart container';
       const chartR = document.getElementById(idElementHtml) // or you can use ViewChild as well;
       if (typeof chartR !== undefined && chartR !== null){
          Highcharts.chart(idElementHtml, this.options);
       }
    }
  }
}

如何在Angular中使用高榜？

How to use high charts in Angular?

javascript

highcharts

angular

angular5

angular6