莫里斯条形图,显示1行中的2种颜色,负面和正面

时间:2017-12-11 08:12:47

标签: javascript css morris.js

我有一张显示正面和负面结果的Morris条形图。

我想要实现的是制作2种颜色,一种用于阴性,一种用于阳性结果,如下图所示。

我查看了文档,但未找到任何解决方案。

这可能与否?

这是一个当前代码:

var positiveColor = 'orange';   //'#32CD32';
var negativeColor = 'grey';     //'#FF6347';

Morris.Bar({
  element: 'morris-bar2',
  barColors: [positiveColor, negativeColor],
  data: <?php echo $json_data2; ?>,
  stacked: false,
  resize: true,
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Total', ''],
  hideHover: false,
  gridTextColor: '#4F5F6F',
  gridTextSize: '12'
});

示例:

当前条形颜色 enter image description here

需要像

enter image description here

2 个答案:

答案 0 :(得分:4)

根据one of the examples on GitHub,您可以使用var d map[string]interface{} if err := json.NewDecoder(response.Body).Decode(&d); err != nil { panic(err) } test := d["data"].(map[string]interface{})["type"] fmt.Println(test) 属性的回调。

所以,你可以这样做:

if(file_exists($file_path)){
    //load the excel library
    $CI->load->library('excel');
    //read file from path
    $objPHPExcel = PHPExcel_IOFactory::load($file_path);
    //get only the Cell Collection
    $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
    //extract to a PHP readable array format
    foreach ($cell_collection as $cell) {
        $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
        $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
        $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();
        if(strstr($data_value,'=')==true){
           // $data_value = $objPHPExcel->getActiveSheet()->getCalculatedValue($cell)->getValue();
        }
        //header will/should be in row 1 only. of course this can be modified to suit your need.
        if ($row == 1) {
            $header[$row][$column] = $data_value;
        } else {
            $arr_data[$row][$column] = $data_value;
        }
    }
    //send the data in an array format
    $data['header'] = $header;
    $data['values'] = $arr_data;
    return $data;
}

答案 1 :(得分:0)

嗯,您可以随时使用此代码

 ykeys: ['positive', 'negative'],
 barColors: ['#00cccc', '#3300cc'],

它只是一个例子

我所拥有的完整例子;

var bar = new Morris.Bar({
  element: 'chart',
  resize: true,
  data:[<?php echo $chart_data; ?>],
  barColors: ['#00cccc', '#3300cc'],
  xkey: 'date',
  ykeys: ['Positive', 'Negative'],
  labels: ['Positive Value', 'Negative Value '],
  hideHover: 'auto'
});