Question

我有一个带有几个注释的面积图。如何让图表在注释文本中使用任何html？

例如，如果我的注释文本是：

'<b>Hello</b> this is the first line.<br />And this is the second line.'

它将显示为：

您好这是第一行这是第二行。

我查阅了文档，看起来可以通过将allowHtml设置为true来在注释图表中完成，但我无法弄清楚如何使用其他图表。

我的数据表是用PHP / JSON生成的，因为原始数据在mysql数据库中。

我的PHP文件是：

$table = array();
$table['cols'] = array(

    //Labels for the chart, these represent the column titles
    array('id' => '', 'label' => 'Date', 'type' => 'date'),
    array('id' => '', 'label' => 'Value', 'type' => 'number'),
    array('id' => '', 'label' => 'event', 'type' => 'string', 'role' => 'annotation'),
    array('id' => '', 'label' => 'eventText', 'type' => 'string', 'role' => 'annotationText'),
); 

$rows = array();
foreach($result as $row){
    $temp = array();

    // re-format date to be compatible with json
    $date = $row['date'];
    $day = date('d', strtotime($date));
    $month = date('m', strtotime($date));
    $year = date('Y', strtotime($date));

    // look for events that match the same date
    $event_sql = "SELECT * FROM events WHERE date='$date'";
    $event_query = mysqli_query($conn, $event_sql);
    while ($event_row = mysqli_fetch_assoc($event_query)){
        $event_date = $event_row['date'];
        $event_type = $event_row['type'];
        $event_details = $event_row['event'];
    }

    $temp[] = array('v' => (string) "Date($year, $month, $day)");
    $temp[] = array('v' => (float) $row['gbp_value']);

    if ($date == $event_date){
        $temp[] = array('v' => (string) $event_type);

        $temp[] = array('v' => (string) $event_details);
    }

    $rows[] = array('c' => $temp);
}

$result->free();

$table['rows'] = $rows;

$jsonTable = json_encode($table, true);
echo $jsonTable;

并显示图表：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(valueChart);

    function valueChart() {

        var jsonData = $.ajax({
            url: "chart.php",
            dataType:"json",
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var options = {
            legend:{position:'none'},
            annotations: {style: 'point'},
            vAxis: {format: '£,###'},
            chartArea: {'top':'25', 'left':'135', 'width':'80%', 'height':'80%'}
        };

        var formatter = new google.visualization.NumberFormat({prefix: '£'});
        formatter.format(data, 1);

        var chart = new google.visualization.AreaChart(document.getElementById('value_chart'));

        chart.draw(data, options);
    }
</script>
<div id="value_chart" style="width:980px; height:350px; "></div>

非常感谢所有人的帮助！

Google Chart - 如何在注释文本中使用HTML标记？

0 个答案: