Highcharts Display Issue - PullRequest
       13

Highcharts Display Issue

0 голосов
/ 18 марта 2019

Проблема, с которой сталкиваются, заключается в том, что plotLines в гистограммах с отрицательным стеком исчезают на основе данных ряда.

Например, если заданы данные [{"data": [23.0]}, {"data": [- 0.0]}], диаграмма выглядит следующим образом: A version of issue

PlotLines на [-47,28]

Та же самая проблема, связанная с данными [{"data": [10.0]}, {"data": [- 12.0]}]: B version of issue

PlotLines на [-33,14]

Наконец, проблема может выглядеть следующим образом, если data [["data": [22.7]}, {"data": [- 24.3]}]: C Version of issue

PlotLines на [-36,8]

Пример кода для разных графиков:

$.getJSON('targets.json', function(jsonplotdata) {
      $.getJSON('chart.json', function(datajsp) {
        var chart = new Highcharts.chart({
          chart: {
            renderTo: 'chart',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false,
            type: 'bar',
          },
          credits: {
            enabled: false
          },
          lang: {
            noData: "No Data Available!"
          },
          title: {
            text: ''
          },
          xAxis: {
            labels: {
              enabled: false
            },
            lineWidth: 0,
            minorTickLength: 0,
            tickLength: 0,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            categories: ['']
          },
          yAxis: {
            labels: {
              enabled: false,
            },
            plotLines: [{
              color: 'black',
              dashStyle: 'Solid',
              zIndex: 5,
              width: 1,
              label: {
                text: 'Target<br/>47 kg/t',
                style: {
                  fontSize: "10px",
                  fontFamily: 'sans-serif'
                },
                rotation: 0,
                align: 'center',
                x: 25,
              }
            }, {
              color: 'black',
              dashStyle: 'Solid',
              zIndex: 5,
              width: 1,
              label: {
                text: 'Target<br/>28 kg/t',
                style: {
                  fontSize: "10px",
                  fontFamily: 'sans-serif'
                },
                rotation: 0,
                align: 'center',
                x: -25,
              }
            }],
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            title: {
              text: ''
            }
          },
          colors: ['#4572A7', '#AA4643'],
          legend: {
            enabled: false,
          },
          tooltip: {
            enabled: false,
          },
          plotOptions: {
            series: {

              stacking: 'normal',
              pointWidth: 60
            }
          },
          series: [{
            name: 'chart',
            data: [],
            dataLabels: {
              enabled: true,
              x: 16,
              format: '{series.name}<br/>{point.y} kg/t',
              style: {
                align: 'center',
                fontSize: "10px",
                fontWeight: 'normal',
                textOutline: false,
                fontFamily: 'sans-serif',
                'text-anchor': 'middle'
              }
            }
          }, {
            name: 'Lime + Dolo',
            data: [],
            dataLabels: {
              enabled: true,
              x: 25,
              formatter: function() {
                return this.series.name + '<br/>' + Math.abs(this.y) + ' kg/t';
              },
              style: {
                color: 'white',
                align: 'center',
                fontSize: "10px",
                fontWeight: 'normal',
                textOutline: false,
                fontFamily: 'sans-serif',
                'text-anchor': 'middle'
              }
            }
          }],
        });

        datajsp.forEach(function(datajsp, i) {
          chart.series[i].setData(datajsp.data);

          chart.yAxis[0].options.plotLines[0].value = jsonplotdata[0];
          chart.yAxis[0].options.plotLines[1].value = jsonplotdata[1];
          chart.yAxis[0].update();

        });

      });

Ожидаемый вид: Fine View

Я ищу лучший способ преодолеть эту проблему.

1 Ответ

0 голосов
/ 21 марта 2019

Последнее предложение @WojciechChmiel сработало отлично! Тем не менее, кажется, что проще всего было добавить ряд разброса, как предложено в этой ссылке: https://www.highcharts.com/forum/viewtopic.php?t=34848

Добавлены следующие серии: { name:"Target 47", type:'scatter', marker:{ enabled:false }, data:[-75] },{ name:"Target 28", type:'scatter', marker:{ enabled:false }, data:[28] }

Правильная позиция цели для отрицательного стекового бара, -47, достигается путем установки его в -75, сумма 28 + 47.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...