highchart绘图变量问题

问题描述 投票:1回答:1

我坚持使用高清数据。我有几个变量的数组格式,并希望在图表的工具提示中显示它们,但它显示整个数组而不是每个记录一个实体。

这是我的代码:

    $json['sales'] = array();
    $json['xaxis'] = array();
    $json['revenue'] = array();

    $json['sales']['name'] = $this->language->get('text_products');
    $json['sales']['type'] = 'column';
    $json['sales']['data'] = array();

    switch ($range) {
        default:
        case 'day':
            $results = $this->model_report_sale->getSaleVsOptions($filter_data, $date=1);

            foreach ($results as $key => $value) {
                $json['sales']['data'][] = $value['quantity'];
                $json['revenue'][] = $value['total'];
                $json['xaxis'][] = $value['xaxis'];
            }

        break;

我的ajax调用代码如下:

$.ajax({
        type: 'get',
        url: 'index.php?route=dashboard/sale/getSale&token=<?php echo $token; ?>&range=' + $(this).attr('href') + '&filter_option=' + $('#option .active a').attr('href'),
        dataType: 'json',
        beforeSend: function() {
            $('.salevsoption').find('.progress_loading_bar').fadeIn();
        },
        complete: function() {
            $('.salevsoption').find('.progress_loading_bar').fadeOut();
        },
        success: function(json) {
            chart = new Highcharts.Chart({  
            chart: {
                renderTo: 'sale_vs_option',
                type: 'line'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            credits: {
                    enabled: false
            },
            exporting: {
                     enabled: false
            },
            xAxis: {
                categories: json['xaxis'],
                crosshair: true
            },
            yAxis: [{ // Primary yAxis
                labels: {
                //format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
                },
                title: {
                text: 'Products',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
                }
            }],
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.0f}'
                    }
                }
            },
            tooltip: {
                shared: true,
                pointFormat: 'Products: <b>{point.y:.0f}</b><br/> Sales: <b>{point.revenue:.2f}</b>'
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 360,
                verticalAlign: 'top',
                y: -15,
                floating: true,
                enabled: false
            },
            series: [
                json['sales'] 
            ]
             });                                                
        },
        error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    }); 

我在tooltip部分与{point.revenue:.2f}有问题。我把一切都搞定了,但在工具提示中没有获得收入价值。

当我用{point.revenue:.2f}替换json['revenue']时,它会在每个图表记录上显示整个数组。

graph charts highcharts
1个回答
0
投票

你将需要使用formatter而不是format API Doc

tooltip: {
  formatter: function() {
    return 'Products: <b>' + this.y + '</b><br/> Sales: <b>' + this.point.revenu + '</b>'
  }
}

Fiddle

© www.soinside.com 2019 - 2024. All rights reserved.