Question

我被海图数据卡住了。我没有几个数组格式的变量，想要在图表的工具提示中显示它们，但它显示的是整个数组，而不是每个记录一个实体。

这是我的代码：

    $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']时，它将在图表的每个记录上显示整个数组。

Answer 1

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

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

Fiddle

hightchart绘制变量问题

1 个答案: