Question

所以我有一个需要创建的图表图像：https://i.stack.imgur.com/BGwaw.png，在该图像中有一条水平线注释，其中注释在图表顶部具有称为“目标总计”的图例/标签。我的问题是如何在图表js注释中执行此操作？

这是我的图表：https://i.stack.imgur.com/ALaV5.png

这是我的代码：

var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    var color = Chart.helpers.color;
                    var monthlydpuData = {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [{
                        label: 'Actual C+D',
                        backgroundColor: '#00566a',
                        borderWidth: 1,
                        data: [0,0,10,8,0,7,0,7,9,13,0,0]
                        },
                       {
                        label: 'Actual A+B',
                        backgroundColor:'#a6cad8',
                        data: [0,0,10,7,0,1,0,5,7,12,0,0]
                        },
                    ]

                };
 window.onload = function() {
var ctx = document.getElementById('monthlydpu').getContext('2d');
                    ctx.canvas.height = 100;
                    window.myBar = new Chart(ctx, {
                        type: 'bar',
                        data: monthlydpuData,

                        options: {
                            annotation: {
                                annotations: [{
                                    id: 'targetab',
                                    type: 'line',
                                    mode: 'horizontal',
                                    scaleID: 'y-axis-0',
                                    value: 2,
                                    borderColor: '#00566a',
                                    borderWidth: 1,
                                    label: {
                                      enabled: true,
                                      //content: 'Target A + B : 2'
                                    }
                                },{
                                    id: 'targetcd',
                                    type: 'line',
                                    mode: 'horizontal',
                                    scaleID: 'y-axis-0',
                                    value: 18,
                                    borderColor: '#a6cad8',
                                    borderWidth: 1,
                                    label: {
                                      enabled: true,
                                      //content: 'Target C + D : 18'
                                    }
                                  }]
                                },
                            responsive: true,
                            scales: {
                                xAxes: [{
                                    stacked: true,
                                        gridLines: {
                                           display:false
                                        },
                                }],
                                yAxes: [{
                                    stacked: true,
                                        gridLines: {
                                            display:false
                                        },
                                }]
                            },
                            legend: {
                                position: 'top',
                            },
                        }
                    });
}

Answer 1

我尝试修改表单基础演示代码 canvasJS库

base demo code from canvasJS

我混了

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
      text: "Google - Consolidated Quarterly Revenue",
      fontFamily: "arial black",
      fontColor: "#695A42"
    },
    axisX: {
      interval: 1,
      intervalType: "year"
    },
    axisY: {
      valueFormatString: "$#0bn",
      gridColor: "#B6B1A8",
      tickColor: "#B6B1A8"
    },
    toolTip: {
      shared: true,
      content: toolTipContent
    },
    data: [{
        type: "stackedColumn",
        indexLabel: "{y}",
        indexLabelFontColor: "#EEEEEE",
        showInLegend: true,
        color: "#696661",
        name: "Q1",
        dataPoints: [{
            y: 6.75,
            x: new Date(2010, 0)
          },
          {
            y: 8.57,
            x: new Date(2011, 0)
          },
          {
            y: 10.64,
            x: new Date(2012, 0)
          },
          {
            y: 13.97,
            x: new Date(2013, 0)
          },
          {
            y: 15.42,
            x: new Date(2014, 0)
          },
          {
            y: 17.26,
            x: new Date(2015, 0)
          },
          {
            y: 20.26,
            x: new Date(2016, 0)
          }
        ]
      },
      {
        type: "stackedColumn",
        showInLegend: true,
        indexLabel: "{y}",
        indexLabelFontColor: "#EEEEEE",
        name: "Q2",
        color: "#EDCA93",
        dataPoints: [{
            y: 6.82,
            x: new Date(2010, 0)
          },
          {
            y: 9.02,
            x: new Date(2011, 0)
          },
          {
            y: 11.80,
            x: new Date(2012, 0)
          },
          {
            y: 14.11,
            x: new Date(2013, 0)
          },
          {
            y: 15.96,
            x: new Date(2014, 0)
          },
          {
            y: 17.73,
            x: new Date(2015, 0)
          },
          {
            y: 21.5,
            x: new Date(2016, 0)
          }
        ]
      }
    ]
  });
  chart.render();

  function toolTipContent(e) {
    var str = "";
    var total = 0;
    var str2, str3;
    for (var i = 0; i < e.entries.length; i++) {
      var str1 = "<span style= \"color:" + e.entries[i].dataSeries.color + "\"> " + e.entries[i].dataSeries.name + "</span>: $<strong>" + e.entries[i].dataPoint.y + "</strong>bn<br/>";
      total = e.entries[i].dataPoint.y + total;
      str = str.concat(str1);
    }
    str2 = "<span style = \"color:DodgerBlue;\"><strong>" + (e.entries[0].dataPoint.x).getFullYear() + "</strong></span><br/>";
    total = Math.round(total * 100) / 100;
    str3 = "<span style = \"color:Tomato\">Total:</span><strong> $" + total + "</strong>bn<br/>";
    return (str2.concat(str)).concat(str3);
  }

}

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

如何在图表JS注释上添加图例

1 个答案: