Question

我试图在图表上添加一条带有工具提示的行-“合同里程”，但是我需要在该行上添加一个点，该行将有一个单独的工具提示“ Expected End Mileage”。我的数据如下所示：

var line = [
    {xLabel: "2018-03-05", yValue: '0'},
    {xLabel: "2018-03-06"},
    {xLabel: "2018-03-07"},
    {xLabel: "2018-03-08"},
    {xLabel: "2018-03-09"},
    {xLabel: "2018-03-10", yValue: "220", **toolTip: 'Expected End Mileage'**},
    {xLabel: "2018-03-11"},
    {xLabel: "2018-03-12"},
    {xLabel: "2018-03-13", yValue: '300'},
    {xLabel: "2018-03-14"},
    {xLabel: "2018-03-15"},
    {xLabel: "2018-03-16"},
    {xLabel: "2018-03-17"},
    {xLabel: "2018-03-18"},
    {xLabel: "2018-03-19"},
    {xLabel: "2018-03-20", yValue: '400'}
];

这是我创建图表的功能：

getLineChartFieldGroup = function(cfg, data) {

    // do nothing if configuration or data not defined.
    if (!cfg || !cfg.lines || !data) return;

    var chartColors_ = [];
    var chartSeries_ = [];
    var chartDataset_ = [];

    // builds the chart colors, series and dataset.
    angular.forEach(cfg.lines, function(line) {
        chartSeries_.push(line.tooltip || null);
        chartColors_.push(line.color || null);
        chartDataset_.push({fill: (line.fillColor || false), xAxisID: 'xAxis', yAxisID: 'yAxis', spanGaps: true, borderDash: line.borderDash});
    });

    // builds the global chart configurations, labels and data.
    var xAxisLabel_ = cfg.globalConfig ? cfg.globalConfig.xAxisLabel : '';
    var yAxisLabel_ = cfg.globalConfig ? cfg.globalConfig.yAxisLabel : '';
    var lineTension_ = cfg.globalConfig ? cfg.globalConfig.lineTension : 0;
    var defaultData_ = cfg.globalConfig ? cfg.globalConfig.defaultData : null;
    var chartLabels_ = getChartLabels(data);
    var chartData_ = getChartData(cfg.lines, data, chartLabels_, defaultData_);

    // prepares the label and data to display at end of the chart.
    // condition to align the single point to middle of the chart.
    if (chartLabels_.length === 1) {
        var parsedDate = parseDate(chartLabels_[0]);

        var prevMonth = new Date(parsedDate.getFullYear(), parsedDate.getMonth() - 1, 1);
        var nextMonth = new Date(parsedDate.getFullYear(), parsedDate.getMonth() + 1, 1);

        chartLabels_.unshift(formattedDateYYYYMMDD(prevMonth, '-'));
        for (var pIndex = 0; pIndex < chartData_.length; pIndex++) {
            chartData_[pIndex].unshift(null);
        }

        chartLabels_.push(formattedDateYYYYMMDD(nextMonth, '-'));
        for (var nIndex = 0; nIndex < chartData_.length; nIndex++) {
            chartData_[nIndex].push(null);
        }
    }

    // builds the chart field group.
    lineChartFieldGroup = [
        {
            className: 'col-xs-12 col-md-12',
            template: "<canvas height=\"25%\" width=\"100%\" class='chart chart-line' chart-labels='to.chartLabels' chart-series='to.chartSeries' chart-data='to.chartData' chart-colors='to.chartColors' chart-options='to.chartOptions' chart-dataset-override='to.chartDataset'>",
            templateOptions: {
                chartLabels: chartLabels_,
                chartSeries: chartSeries_,
                chartData: chartData_,
                chartColors: chartColors_,
                chartDataset: chartDataset_,
                chartOptions: {
                    scales: {
                        xAxes: [
                            {
                                id: 'xAxis',
                                type: 'time',
                                ticks: {
                                    autoSkip: true,
                                    maxTicksLimit: 12,
                                    minRotation: 30,
                                    maxRotation: 30
                                },
                                display: true,
                                time: {
                                    tooltipFormat: 'DD/MM/YYYY',
                                    unit: 'month',
                                    displayFormats: {month: 'MMM YYYY'}
                                },
                                scaleLabel: {display: true, labelString: xAxisLabel_}
                            }
                        ],
                        yAxes: [
                            {
                                id: 'yAxis',
                                type: 'linear',
                                ticks: {
                                    callback: function(label, index, labels) {
                                        if (Math.floor(label) === label) {
                                            return label;
                                        }
                                    }
                                },
                                tooltips: false,
                                display: true,
                                position: 'left',
                                scaleLabel: {display: true, labelString: yAxisLabel_}
                            }
                        ]
                    },
                    elements: {
                        line: {tension: lineTension_}
                    }
                }
            }
        }
    ];
    return lineChartFieldGroup;
};

我如何获取行数据

lines.line1 = [
            {xLabel: "2018-04-05", yValue: '0'},
            {xLabel: "2018-04-06"},
            {xLabel: "2018-04-07"},
            {xLabel: "2018-04-08"},
            {xLabel: "2018-04-09"},
            {xLabel: "2018-04-10", yValue: "220", toolTip: 'Expected End Mileage'},
            {xLabel: "2018-04-11"},
            {xLabel: "2018-04-12"},
            {xLabel: "2018-04-13", yValue: '300'},
            {xLabel: "2018-04-14"},
            {xLabel: "2018-04-15"},
            {xLabel: "2018-04-16"},
            {xLabel: "2018-04-17"},
            {xLabel: "2018-04-18"},
            {xLabel: "2018-04-19"},
            {xLabel: "2018-04-20", yValue: '400'}
        ];

var chartConfig = {
    lines: [
        {tooltip: 'Contract Mileage', color: '#c73617', fillColor: false, key: 'secondLine', borderDash: [2,2]}
                ],
    globalConfig: {
        xAxisLabel: 'Months',
        yAxisLabel: 'Odometer',
        lineTension: 0,
        defaultData: null
    }
};

// Fuel usage form to display the average consumption.
vm.odometerChartFields.push({
    fieldGroup: [
        {
        className: 'row',
            fieldGroup: [
                {
                    className: 'col-xs-12',
                    fieldGroup: getLineChartFieldGroup(chartConfig, lines)
                }
            ]
         }
      ]
   }
 )

我正在尝试实现这一点，以使除具有toolTip属性的一个点外的其他点显示“合同里程”，而与具有toolTip属性的一个点不同。同样，带有不同工具提示的颜色也应该具有不同的颜色。

这有可能吗？

Chart.js行带有2个不同的工具提示和点颜色

0 个答案: