Как отобразить значения на столбце по вертикали на графике вершины - PullRequest
Новая
       35

Как отобразить значения на столбце по вертикали на графике вершины

0 голосов
/ 22 апреля 2020

Я использую гистограмму на вершине, на которой я хочу отображать значения на столбце по вертикали, но по горизонтали. Я ищу много, чтобы показать значение по вертикали, но не нахожу никакого решения. Пожалуйста, помогите мне решить эту проблему. Я также разделяю код.

Вот сценарий графика: 

 <script type="text/javascript">


$(document).ready(function() {
// custom datalabelBar
     var options = {
    chart: {
        height: 350,
        type: 'bar',
        toolbar: {
            show: true
        }
    },
    plotOptions: {
        bar: {
            horizontal: false,
            dataLabels: {
                position: 'top',
            },
        }
    },
    dataLabels: {
        enabled: true,
        position: 'top',
        formatter: function (val) {
        return val ;
      },
        horizontal: true,
        offsetX: 0,
        style: {
            fontSize: '10px',
            colors: ['#000']
        }
    },
    stroke: {
        show: false,
        width: 1,
        colors: ['#fff'],
        lineCap: 'round',
        curve: 'smooth',
    },
    series: [{
        name: 'Packing',
        data: <?php echo json_encode($wd_packing) ?> 
    }, {
        name: 'Dispatch',
        data: <?php echo json_encode($wd_dispatch) ?>
    },
    {
        name: 'Remaning',
        data: <?php echo json_encode($wd_reaming) ?> 
    }],
    xaxis: {
        categories: <?php echo json_encode($wd_week) ?>,
    },
}
var chart = new ApexCharts(
    document.querySelector("#weekly_dispatch_graph"),
    options
);
chart.render();



 });

Вот снимок экрана графика:

enter image description here

Пожалуйста, помогите мне решить эту проблему. Заранее спасибо.

1 Ответ

0 голосов
/ 23 апреля 2020

Это возможно! Ваш вопрос о dataLabels . ApexCharts предоставляют нам общий параметр dataLabels, а параметр dataLabels зависит от типа диаграммы. Есть options.dataLabels и options.plotOptions.bar.dataLabels соответственно.

В первом вы можете играть с offsetY, а во втором вы можете настроить эти метки orientation и их position.

Попробуйте поиграть с этими значениями, хорошо удачи :) 1012 

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
      name: 'Packing',
      data: [300000, 300000, 500000, 800000]
    }, {
      name: 'Dispatch',
      data: [46577, 296948, 153120, 0]
    },
    {
      name: 'Remaning',
      data: [252962, 2382, 235143, 800000]
    }
  ],
  xaxis: {
    categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
  },
  plotOptions: {
    bar: {
      dataLabels: {
        orientation: 'vertical',
        position: 'center' // bottom/center/top
      }
    }
  },
  dataLabels: {
    style: {
      colors: ['#000000']
    },
    offsetY: 15, // play with this value
  },
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.18.1/dist/apexcharts.min.js"></script>
...