Yii Highchart 扩展 - 根据值更改颜色
Yii Highchart extension - Change color based on value
所以,我在 Yii 上使用这个 highcharts 扩展。
我使用数据库(从我的控制器)获取数据。视图如下所示:
<div class="hero-unit" id="content" style="position:relative;border: solid green">
<div style="max-width:100%;overflow:auto;">
<div style="width:2200px;">
<center>
<?php
$label = array(); //inisiasi label axis
$nilai = array(); //inisiasi nilai data
foreach ($dataProvider3->getData() as $i => $ii) {
$label[$i] = array($ii['no'] . '. ' . $ii['namapek']);//this is fetched from SQL syntax in controller
$nilai[$i] = (float) $ii['pek']; //this is fetched from SQL syntax in controller
}
$this->widget('application.extensions.highcharts.HighchartsWidget', array(
'scripts' => array(
'modules/exporting',
'themes/epcGray',
'highcharts-more',
),
'options' => array(
'chart' => array('defaultSeriesType' => 'column', 'backgroundColor' => 'rgba(255, 255, 255, 0.1)'),
'title' => FALSE,
'legend' => array(
'enabled' => false,
),
'xAxis' => array(
'categories' => $label,
), //nama axis
'yAxis' => array(
'min' => 0,
'title' => array(
'text' => 'Percentage'
),
),
'series' => array(
array('data' => $nilai)//data,
),
'tooltip' => array(
'formatter' => 'js:function() {return "<b>Step "+ this.x +"</b><br/>" + "Finished: "+ Highcharts.numberFormat(this.y, 2) +"%"; }',
),
'plotOptions' => array(
'column' => array(
'zones' =>
array('value' => 50, 'color' => '#EB4011'),
array('value' => 120, 'color' => '#aaff99'),
),
'series' => array(
'point' => array(
'events' => array(
'click' => 'js:function() {
var cat = this.category;
var res = parseInt(cat, 10);
window.open ("index.php?r=reports/rinci&id=" + res); }',
)
),
)
),
'credits' => array('enabled' => false),
)
));
?>
</center>
</div>
</div>
我找到了这个关于根据值更改条形颜色的答案 here。但是它是 json 格式,我需要使用它 Yii 小部件格式。我认为这很容易做到,但它似乎不起作用。我究竟做错了什么?
我试着把这个:
'colorByPoint' => true,
在 zones =>
上面,颜色按点变化,但不是按我希望的那样按值变化。我也放在了series
数组下,但是也没用
所以我尝试了很多方法来让它发挥作用。
但似乎是扩展本身的缺陷。
所以我直接在视图上使用highchart js文件。那很好用。任何人都面临同样的问题,如果它缺少太多有用的功能,我建议离开扩展。
这些是必需的 js 文件:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
使用示例here。
所以,我在 Yii 上使用这个 highcharts 扩展。 我使用数据库(从我的控制器)获取数据。视图如下所示:
<div class="hero-unit" id="content" style="position:relative;border: solid green">
<div style="max-width:100%;overflow:auto;">
<div style="width:2200px;">
<center>
<?php
$label = array(); //inisiasi label axis
$nilai = array(); //inisiasi nilai data
foreach ($dataProvider3->getData() as $i => $ii) {
$label[$i] = array($ii['no'] . '. ' . $ii['namapek']);//this is fetched from SQL syntax in controller
$nilai[$i] = (float) $ii['pek']; //this is fetched from SQL syntax in controller
}
$this->widget('application.extensions.highcharts.HighchartsWidget', array(
'scripts' => array(
'modules/exporting',
'themes/epcGray',
'highcharts-more',
),
'options' => array(
'chart' => array('defaultSeriesType' => 'column', 'backgroundColor' => 'rgba(255, 255, 255, 0.1)'),
'title' => FALSE,
'legend' => array(
'enabled' => false,
),
'xAxis' => array(
'categories' => $label,
), //nama axis
'yAxis' => array(
'min' => 0,
'title' => array(
'text' => 'Percentage'
),
),
'series' => array(
array('data' => $nilai)//data,
),
'tooltip' => array(
'formatter' => 'js:function() {return "<b>Step "+ this.x +"</b><br/>" + "Finished: "+ Highcharts.numberFormat(this.y, 2) +"%"; }',
),
'plotOptions' => array(
'column' => array(
'zones' =>
array('value' => 50, 'color' => '#EB4011'),
array('value' => 120, 'color' => '#aaff99'),
),
'series' => array(
'point' => array(
'events' => array(
'click' => 'js:function() {
var cat = this.category;
var res = parseInt(cat, 10);
window.open ("index.php?r=reports/rinci&id=" + res); }',
)
),
)
),
'credits' => array('enabled' => false),
)
));
?>
</center>
</div>
</div>
我找到了这个关于根据值更改条形颜色的答案 here。但是它是 json 格式,我需要使用它 Yii 小部件格式。我认为这很容易做到,但它似乎不起作用。我究竟做错了什么?
我试着把这个:
'colorByPoint' => true,
在 zones =>
上面,颜色按点变化,但不是按我希望的那样按值变化。我也放在了series
数组下,但是也没用
所以我尝试了很多方法来让它发挥作用。 但似乎是扩展本身的缺陷。
所以我直接在视图上使用highchart js文件。那很好用。任何人都面临同样的问题,如果它缺少太多有用的功能,我建议离开扩展。
这些是必需的 js 文件:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
使用示例here。