highchart绘图变量问题

Posted 2021-05-05

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

这是我的代码：

    $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 + "
" + xhr.statusText + "
" + xhr.responseText);
        }
    }); 

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

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

答案

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

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

Fiddle