如何在Y轴的右侧显示与Y轴的左侧相同的标签ChartJS

时间:2020-02-29 15:55:27

标签: javascript vue.js charts chart.js linechart

我创建了一个折线图,在Y轴的左侧显示金额,现在我必须在Y轴的右侧显示左侧Y轴金额的百分比。


yAxes: [
                        {   
                            id: 'A',
                            fontFamily: "DINPRO, Arial, sans-serif",
                            ticks: {
                                callback: (value, index, values) => {
                                    window.values = values;
                                    let newValue = value;
                                    if (value >= 1000) {
                                        newValue = Math.floor(newValue / 1000);
                                        newValue += " Tsd.";
                                    }
                                    return newValue;
                                }
                            },
                            position: "left",
                            gridLines: {}
                        },
                        {   id: "B",
                            type: "linear",
                            display: true,
                            fontFamily: "DINPRO, Arial, sans-serif",
                            position: "right",
                            ticks: {
                              callback: (value, index, values) => {
                                // Here I will write percentage calculation logic but the values coming here is not same as left side of Y axis.
                            }
                        },

                    ]
Thanks in advance !

1 个答案:

答案 0 :(得分:1)

基于Create Multiple Axis中从 Chart.js文档,可以按以下步骤完成:

zoom
Python 3.8.0 (tags/v3.8.0:fa919fd, Oct 14 2019, 19:21:23) [MSC v.1916 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.        
>>> from PyZ3950 import zoom
>>> conn = zoom.Connection ('z3950.loc.gov', 7090)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\zoom.py", line 276, in __init__
    self.connect()
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\zoom.py", line 301, in connect
    self._cli = z3950.Client (self.host, self.port,
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\z3950.py", line 510, in __init__
    self.initresp = self.transact (
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\z3950.py", line 529, in transact
    b = self.encode_ctx.encode (APDU, to_send)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 622, in encode
    spec.encode (self, data)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 1192, in encode
    ctyp.encode (ctx, val)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 858, in encode
    self.typ.encode (ctx, val)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 796, in encode
    self.encode_val (ctx, val)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 1504, in encode_val
    typ.encode (ctx, v)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 858, in encode
    self.typ.encode (ctx, val)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 796, in encode
    self.encode_val (ctx, val)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 1089, in encode_val
    ctx.bytes_write (val)
  File "D:\Downloads\Applications\PyZ3950-danizen\PyZ3950-master\PyZ3950\asn1.py", line 633, in bytes_write
    raise EncodingError("Bad type to bytes_write")
PyZ3950.asn1.EncodingError: Bad type to bytes_write