highcharts 如何修正索引和当前日期

rqdpfwrv  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(256)

我有以下错误与此highcharts图表库。我需要更新日期到当前的一个,并在索引中显示相应日期的日期。
只需将Highcharts.chart更改为Highcharts.stockChart即可。(随附图片)
enter image description here
enter image description here
数据和图表从这里

function datagrafico(base_url){

 $.ajax({
   url: base_url + "index.php/Admin/getDataDias",
   type:"POST",
   dataType:"json",
   success:function(data){
      var dias = new Array();
      var montos = new Array();
      $.each(data,function(key, value){
           dias.push(value.fecha_actualizacion);
           valor = Number(value.monto);
           montos.push(valor);
        });
        graficar(dias,montos);
        }
       });
      }

function graficar(dias, montos){

    Highcharts.stockChart('grafico', {
      chart: {
      renderTo: 'container',
      type: 'column'
    },
    title: {
       text: 'Monto acumulado por ventas diarias'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: dias,
        crosshair: true
        },

    yAxis: {
        min: 0,
        title: {
            text: 'Monto Acumulado (Colombiano)'
        }
    },

    tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">Monto: </td>' +
            '<td style="padding:0"><b>{point.y} Colombiano</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
    },
    plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0
            },
            series:{
                dataLabels:{
                        enabled:true,
                        formatter:function(){
                        return Highcharts.numberFormat(this.y)
                }

            }
        }
    },
    rangeSelector: {
            inputPosition: {
                align: 'right',
                x: 0,
                y: 0
            },
        },
        series: [{
            name: 'dias',
            data: montos

        }]
    });

控制器:

public function getDataDias(){

        $resultados = $this->model_venta->montos();
        echo json_encode($resultados);
    }

和模型:

public function montos(){
    $this->db->select("fecha_actualizacion, SUM(total) as monto");
    $this->db->from("venta");
    $this->db->where("pago_id","2");
    $this->db->where("estado","1");
    $this->db->group_by('DATE(fecha_actualizacion)');
    $this->db->order_by('DATE(fecha_actualizacion)');
    $resultados = $this->db->get();
    return $resultados->result();
}
pdkcd3nj

pdkcd3nj1#

在你的例子中,你将Highcharts更改为Higcharts Stock,它们是相似的,但是从其他API构建图表。请看一下股票documentation,它们在xAxis中没有类别选项。
毫秒格式的数据是Highcharts股票轴中的标准格式,您需要更改数据格式才能将其放入图表中。

series: [{
     type: 'column',
     data: [
       [1592314200000, 165428800],
       [1592400600000, 114406400],
       [1592487000000, 96820400],
       [1592573400000, 264476000],
       [1592832600000, 135445200],
       [1592919000000, 212155600]
     ],
   }]

下面是 highcharts 和 highcharts 股票的例子,以比较建设。
Highchart演示:https://jsfiddle.net/BlackLabel/sw3qr5p9/
Highchart股票演示:https://jsfiddle.net/BlackLabel/drnup1tx/

相关问题