在amcharts中为图例添加另一个字段以显示百分比

时间:2017-11-13 10:11:28

标签: javascript php legend amcharts

我正在使用amcharts为codeigniter中的某些细节创建一个饼图,我使用带有图例的饼图(http://www.amcharts.com/demos/pie-chart-with-legend/),我在视图中使用标题和值查看了图例。现在我想为图例添加另一个字段,该字段显示每个字段的相关百分比。是否有任何关键字或方法可以做到这一点?我是编程新手。 这是我的代码..

$data['chartOne'] = $this->prepareJson($totalQuotations, "q");
$data['chartTwo'] = $this->prepareJson($totalContribution, "c");

<script type = "text/javascript">
                    var chart1 = AmCharts.makeChart( "salesReportPerformanceChartdiv",' . $data["chartOne"] . ');
                    var chart2 = AmCharts.makeChart( "salesReportContributionChartdiv",' . $data["chartTwo"] . ');
                </script>';


public function prepareJson($data, $type) {
    $chatData = [];
    foreach ($data as $status) {
        $stustotal = new \stdClass();
        $stustotal->y = $status->count;
        if ($type == "q") {
            $stustotal->x = $status->status_name;
        } else if ($type == "c") {
            $stustotal->x = $status->user_name;
        }
        array_push($chatData, $stustotal);
    }

    $listeners = new \stdClass();
    $listeners->method = addLegendLabel;
    $listeners->event = "drawn";

    $export = new \stdClass();
    $export->enabled = true;

    $legend = new \stdClass();
    $legend->position = "right";
    $legend->markerType = "circle";
    $legend->autoMargins = true;

    $feOffset = new \stdClass();
    $feOffset->result = "offOut";
    $feOffset->in = "SourceAlpha";
    $feOffset->dx = 0;
    $feOffset->dy = 0;

    $feGaussianBlur = new \stdClass();
    $feGaussianBlur->result = "blurOut";
    $feGaussianBlur->in = "offOut";
    $feGaussianBlur->stdDeviation = 5;

    $feBlend = new \stdClass();
    $feBlend->in = "SourceGraphic";
    $feBlend->in2 = "blurOut";
    $feBlend->mode = "normal";

    $filter = new \stdClass();
    $filter->id = "shadow";
    $filter->width = "200%";
    $filter->height = "200%";
    $filter->feOffset = $feOffset;
    $filter->feGaussianBlur = $feGaussianBlur;
    $filter->feBlend = $feBlend;

    $defs = new \stdClass();
    $defs->filter = $filter;

    $chart = new \stdClass();
    $chart->type = "pie";
    $chart->startDuration = 0;
    $chart->theme = "light";
    $chart->addClassNames = true;
    $chart->legend = $legend;
    $chart->innerRadius = "85%";
    $chart->defs = $defs;
    $chart->dataProvider = (array)$chatData;
    $chart->valueField = "y";
    $chart->titleField = "x";
    $chart->labelRadius = 5;
    $chart->radius = "42%";
    $chart->labelText = "";
    $chart->listeners = $listeners;
    $chart->export = $export;

    $chartJSON = json_encode($chart);

    return $chartJSON;
}

1 个答案:

答案 0 :(得分:0)

您可以通过将[[percents]]短代码添加到字符串来自定义图例valueText以包含百分比。默认情况下,它设置为"[[value]]"。在您的情况下,您似乎必须通过$legend变量进行设置。您可能还希望将valueWidth设置为适应更长的值字符串,如下所示:

$legend->valueText = "[[value]] [[percents]]%"; //customize as needed
$legend->valueWidth = 100; //adjust as needed so it doesn't overlap

Fiddle