jquery 柱状图与箭头比较

kkih6yb8 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(119)

我试着制作一个比较图表。我已经读了很多遍highchart文档，并努力搜索，但我找不到一个选项来创建我想要的图表。
这是原始图表。

//chart1
            Highcharts.chart('chart1', {
                chart: {
                    type: 'column',
                },
                title: { 
                    text: 'Compare chart',
                },
                subtitle: null,
                xAxis: {
                    categories: ['before', 'after', ],
                },
                yAxis: [{
                    title: {
                        text: 'title1'
                    },
                }, {
                    title: {
                        text: 'title2'
                    },
                    opposite: true,
                }, ],
                series: [{
                    name: 'series1',
                    color: '#f5b93d',
                    data: [8652, 4321],

                }, {
                    name: 'series2',
                    color: '#42a7f4',
                    data: [100, 50],
                    yAxis: 1,
                } ]
            });

字符串
来源：https://jsfiddle.net/publisherkim/m6g87hkf/10/
这就是我想做的
https://umings.github.io/images/tobe.png的
我想指出这样一来，series1的数据减少到了多少。
如果有人看到过类似的图表，或者知道任何选项，请帮助。谢谢。

jquery

来源：https://stackoverflow.com/questions/77663754/highchart-column-chart-compare-with-arrow

1条答案

按热度按时间

zzoitvuj1#

你可以使用plotLines来画线，使用SVGRenderer来画箭头：

Highcharts.chart('chart1', {
  chart: {
    ...
    events: {
      load: function() {
        const chart = this,
          series = chart.series[0],
          yAxis = this.yAxis[0],
          maxPoint = series.dataMax,
          minPoint = series.dataMin;

        yAxis.addPlotLine({
          value: maxPoint,
          color: 'red',
          width: 2,
          zIndex: 5
        });

        yAxis.addPlotLine({
          value: minPoint,
          color: 'red',
          width: 2,
          zIndex: 5
        });
      },
      render: function() {
        const chart = this,
          series = chart.series[0],
          yAxis = this.yAxis[0],
          maxPoint = series.dataMax,
          minPoint = series.dataMin,
          arrowWidth = 20,
          arrowLegWidth = 5,
          maxPointPixel = yAxis.toPixels(maxPoint),
          minPointPixel = yAxis.toPixels(minPoint),
          distance = minPointPixel - maxPointPixel,
          arrowYPosition = (maxPointPixel + minPointPixel) / 2 - arrowWidth / 2 + 15,
          arrowXPosition = this.plotWidth / 2 + this.plotLeft - arrowWidth / 2 - 10;

        if (!chart.arrow) {
          chart.arrow = this.renderer.path().attr({
            'stroke-width': 1,
            stroke: 'red',
            fill: 'red',
            zIndex: 5
          }).add();
        }
        chart.arrow.attr({
          d: ['M', arrowXPosition, arrowYPosition, 'L', arrowXPosition + arrowWidth / 2, arrowYPosition + arrowWidth, 'L', arrowXPosition + arrowWidth, arrowYPosition, 'Z']
        })

        if(!chart.arrowLeg){
          chart.arrowLeg = this.renderer.rect().attr({
            fill: 'red',
            zIndex: 5
          }).add();
        }
        chart.arrowLeg.attr({
            x: arrowXPosition + arrowWidth / 2 - arrowLegWidth / 2,
          y: arrowYPosition - 30,
          width: arrowLegWidth,
          height: 30
        })
      }
    }
  },
  ...
});

字符串

Demo：https://jsfiddle.net/BlackLabel/cto81up6/
API：https://api.highcharts.com/highcharts/yAxis.plotLines

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

赞(0）回复(0）举报 12个月前